openclacky 1.5.11 → 1.5.13

data/lib/clacky/web/sessions.js

@@ -26,6 +26,7 @@ const Sessions = (() => {
   let   _loadingMore       = false;
   // Search state
   const _filter            = { q: "", date: "", type: "" };  // committed filter (applied to the search overlay)
+  let   _searchTypeSelect  = null;
   let   _searchOpen        = false;   // is the command-palette search overlay visible?
   // Search results live in their own list, rendered into the overlay's
   // #session-search-results — they NEVER replace the sidebar session list.
@@ -428,12 +429,41 @@ const Sessions = (() => {
 
   const _EMPTY_HINT_ID = "chat-empty-hint";
 
+  let _agentName        = "";
+  let _agentNamePromise = null;
+
+  function _loadAgentName() {
+    if (_agentName) return Promise.resolve(_agentName);
+    if (_agentNamePromise) return _agentNamePromise;
+    _agentNamePromise = fetch("/api/profile")
+      .then(r => (r.ok ? r.json() : {}))
+      .then(d => {
+        _agentName = (d.soul && d.soul.name) || "";
+        return _agentName;
+      })
+      .catch(() => {
+        _agentName = "";
+        return "";
+      })
+      .finally(() => { _agentNamePromise = null; });
+    return _agentNamePromise;
+  }
+
+  function _applyAgentName(name) {
+    if (!name) return;
+    const el = document.querySelector("#" + _EMPTY_HINT_ID + " .chat-empty-title");
+    if (el) el.textContent = I18n.t("chat.empty.title.named", { name });
+  }
+
   function _buildEmptyHintHtml() {
-    const title    = I18n.t("chat.empty.title");
+    const title    = _agentName
+      ? I18n.t("chat.empty.title.named", { name: _agentName })
+      : I18n.t("chat.empty.title");
     const subtitle = I18n.t("chat.empty.subtitle");
     const tip1     = I18n.t("chat.empty.tip1");
     const tip2     = I18n.t("chat.empty.tip2");
     const tip3     = I18n.t("chat.empty.tip3");
+    _loadAgentName().then(_applyAgentName);
     return `
       <div class="chat-empty-icon" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
@@ -931,7 +961,7 @@ const Sessions = (() => {
                 `${answered ? " disabled" : ""}>${escapeHtml(opt)}${rec}</button>`;
       });
       html += `</div>`;
-      if (q.allow_free_text && q.options.length > 0) {
+      if (q.allow_free_text) {
         html += `<input type="text" class="feedback-free-text" data-question-index="${qi}"` +
                 ` placeholder="${escapeHtml(I18n.t("chat.feedback_other"))}"${answered ? " disabled" : ""}>`;
       }
@@ -984,7 +1014,7 @@ const Sessions = (() => {
     card.classList.add("feedback-card--submitted");
 
     const input = $("user-input");
-    if (input) input.value = lines.join("\n");
+    if (input) Composer.setText(input, lines.join("\n"));
     _sendMessage();
     return true;
   }
@@ -1016,6 +1046,16 @@ const Sessions = (() => {
       if (free) free.focus();
     };
 
+    // Enter and the submit button must agree: a stepped card never sends a
+    // partial answer, it jumps back to the first unanswered question instead.
+    const trySubmit = () => {
+      if (stepped) {
+        const blank = list.findIndex((_, i) => _feedbackAnswerFor(card, list, i).length === 0);
+        if (blank !== -1) { showStep(blank); return; }
+      }
+      _submitFeedbackCard(card, list);
+    };
+
     card.querySelectorAll(".feedback-option-btn").forEach(btn => {
       btn.onclick = () => {
         const qi = Number(btn.dataset.questionIndex);
@@ -1024,7 +1064,7 @@ const Sessions = (() => {
           card.querySelectorAll(".feedback-option-btn").forEach(b => { b.disabled = true; });
           card.classList.add("feedback-card--submitted");
           const input = $("user-input");
-          if (input) input.value = list[qi].options[Number(btn.dataset.optionIndex)];
+          if (input) Composer.setText(input, list[qi].options[Number(btn.dataset.optionIndex)]);
           _sendMessage();
           return;
         }
@@ -1054,11 +1094,13 @@ const Sessions = (() => {
         dot.onclick = () => showStep(Number(dot.dataset.step));
       });
 
+      // IME.track so confirming a composition candidate is not read as Enter.
       card.querySelectorAll(".feedback-free-text").forEach(input => {
+        const ime = IME.track(input);
         input.onkeydown = (e) => {
-          if (e.key !== "Enter") return;
+          if (e.key !== "Enter" || ime.isComposing(e)) return;
           e.preventDefault();
-          if (step === list.length - 1) _submitFeedbackCard(card, list);
+          if (step === list.length - 1) trySubmit();
           else showStep(step + 1);
         };
       });
@@ -1067,23 +1109,26 @@ const Sessions = (() => {
     }
 
     const submit = card.querySelector(".feedback-submit-btn");
-    if (submit) {
-      submit.onclick = () => {
-        if (stepped) {
-          // Don't silently drop a question the user skipped past — take them back to it.
-          const blank = list.findIndex((_, i) => _feedbackAnswerFor(card, list, i).length === 0);
-          if (blank !== -1) { showStep(blank); return; }
-        }
-        _submitFeedbackCard(card, list);
-      };
-    }
+    if (submit) submit.onclick = trySubmit;
+  }
+
+  // Render a mention chip (file/directory/session) as a bubble badge.
+  function _renderMentionBadge(chip) {
+    const path = chip.type === "session"
+      ? MentionAC.icons.message
+      : (chip.type === "directory" ? MentionAC.icons.folder : MentionAC.icons.file);
+    return `<span class="msg-mention-badge">` +
+      `<span class="msg-mention-badge-icon">${MentionAC.svgHtml(path, 13)}</span>` +
+      `<span class="msg-mention-badge-name">${escapeHtml(chip.name)}</span>` +
+      `</span>`;
   }
 
   function _sendMessage() {
     if (_sending) return;
     const input   = $("user-input");
-    const content = input.value.trim();
-    if (!content && _pendingImages.length === 0 && _pendingFiles.length === 0) return;
+    const content = Composer.text(input).trim();
+    const mentionChips = Composer.chips(input);
+    if (!content && mentionChips.length === 0 && _pendingImages.length === 0 && _pendingFiles.length === 0) return;
     if (!Sessions.activeId) return;
 
     if (!WS.ready) {
@@ -1104,6 +1149,10 @@ const Sessions = (() => {
     _sending = true;
 
     let bubbleHtml = content ? SkillAC.renderUserMessageHtml(content) : "";
+    if (mentionChips.length > 0) {
+      const chipBadges = mentionChips.map(_renderMentionBadge).join(" ");
+      bubbleHtml = chipBadges + (bubbleHtml ? "<br>" + bubbleHtml : "");
+    }
     if (_pendingImages.length > 0) {
       const thumbs = _pendingImages
         .map(img => `<img src="${img.dataUrl}" alt="${escapeHtml(img.name)}" class="msg-image-thumb">`)
@@ -1142,14 +1191,23 @@ const Sessions = (() => {
         name:      f.name,
         path:      f.path,
         mime_type: f.mime_type
-      }))
+      })),
+      ...mentionChips
+        .filter(c => c.type === "file" || c.type === "directory")
+        .map(c => ({ name: c.name, path: c.path, reference: true }))
     ];
+    const references = mentionChips.map(c => {
+      const ref = { type: c.type, name: c.name };
+      if (c.type === "session") ref.session_id = c.session_id;
+      else ref.path = c.path;
+      return ref;
+    });
     _pendingImages.length = 0;
     _pendingFiles.length  = 0;
     _imageSeq = 0;
     _renderAttachmentPreviews();
 
-    WS.send({ type: "message", session_id: Sessions.activeId, content, files, lang: I18n.lang() });
+    WS.send({ type: "message", session_id: Sessions.activeId, content, files, references, 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
@@ -1160,8 +1218,7 @@ const Sessions = (() => {
       card.classList.add("feedback-card--submitted");
     });
 
-    input.value        = "";
-    input.style.height = "auto";
+    Composer.clear(input);
     _drafts.delete(Sessions.activeId);
     _attachmentDrafts.delete(Sessions.activeId);
     setTimeout(() => { _sending = false; }, 300);
@@ -1171,6 +1228,22 @@ const Sessions = (() => {
   // Wires up the send button, attach button, file picker, drag-drop, paste,
   // and IME composition tracking. All targets are static in index.html.
   function _initComposer() {
+    // @ mention autocomplete — registered before Composer/SkillAC so its
+    // keydown stopImmediatePropagation wins over chip deletion / Enter-send.
+    if (typeof MentionAC !== "undefined") {
+      MentionAC.attach({
+        input:         "user-input",
+        menu:          "mention-autocomplete",
+        getSessionId:  () => Sessions.activeId,
+        getWorkingDir: () => {
+          const s = Sessions.find(Sessions.activeId);
+          return s ? (s.working_dir || "") : "";
+        },
+      });
+    }
+    // contenteditable composer: chip deletion, plain-text paste, Shift+Enter.
+    Composer.init($("user-input"));
+
     // Send & attach buttons
     document.getElementById("btn-send").addEventListener("click", _sendMessage);
     document.getElementById("btn-attach")
@@ -1215,7 +1288,7 @@ const Sessions = (() => {
   //
   // All search-related interactions. The search UI lives in the sessions
   // sidebar: a magnifier toggle button, the search panel (q input, type
-  // <select>, date <input>), inline ✕ clear, and "clear all filters" button.
+  // dropdown, date <input>), inline ✕ clear, and "clear all filters" button.
   //
   // Everything uses event delegation because some elements (e.g. the clear
   // buttons) are re-rendered as filter state changes.
@@ -1229,6 +1302,17 @@ const Sessions = (() => {
     const cmdbarKbd = document.querySelector("#header-cmdbar .cmdbar-kbd");
     if (cmdbarKbd) cmdbarKbd.textContent = _sessionSearchShortcutLabel();
 
+    const typeWrap = document.getElementById("session-search-type");
+    if (typeWrap && window.CustomSelect) {
+      _searchTypeSelect = window.CustomSelect.init({
+        trigger: typeWrap.querySelector(".custom-select-trigger"),
+        dropdown: typeWrap.querySelector(".custom-select-dropdown"),
+        anchor: typeWrap,
+        portal: true,
+        onSelect: () => Sessions.commitSearch()
+      });
+    }
+
     // Open the palette: top cmdbar button (or the keyboard shortcut, bound below).
     document.addEventListener("click", (e) => {
       if (e.target && e.target.closest("#header-cmdbar")) {
@@ -1281,9 +1365,8 @@ const Sessions = (() => {
     // "Clear all filters" button — resets type + date and re-fetches once
     document.addEventListener("click", (e) => {
       if (e.target && e.target.id === "btn-search-clear-all") {
-        const typeEl = document.getElementById("session-search-type");
         const dateEl = document.getElementById("session-search-date");
-        if (typeEl) typeEl.value = "";
+        if (_searchTypeSelect) _searchTypeSelect.setValue("");
         if (dateEl) DatePicker.clear(dateEl);
         Sessions.commitSearch();
       }
@@ -1300,12 +1383,7 @@ const Sessions = (() => {
       }
     });
 
-    // Type <select> and date picker — commit immediately on change
-    document.addEventListener("change", (e) => {
-      if (e.target && e.target.id === "session-search-type") {
-        Sessions.commitSearch();
-      }
-    });
+    // Date picker — commit immediately on change
     document.addEventListener("datepicker:change", (e) => {
       if (e.target && e.target.id === "session-search-date") {
         Sessions.commitSearch();
@@ -1639,20 +1717,11 @@ const Sessions = (() => {
     if (n > 1) group.classList.remove("expanded");
   }
 
-  // Anchor for a replayed subagent card: inside the tool item that spawned it
-  // when there is one, mirroring the live _phaseHost() nesting.
+  // Anchor for a replayed subagent card: the outer container, mirroring the
+  // live _phaseHost() which now sits phase cards at the top level rather than
+  // nested inside the spawning tool item.
   function _historyPhaseHost(historyCtx, container) {
-    const item = historyCtx.lastItem;
-    if (!item) return container;
-
-    let nest = item.querySelector(":scope > .tool-item-phases");
-    if (!nest) {
-      nest = document.createElement("div");
-      nest.className = "tool-item-phases";
-      const stdout = item.querySelector(":scope > .tool-item-stdout");
-      item.insertBefore(nest, stdout || null);
-    }
-    return nest;
+    return container;
   }
 
   // Render a single history event into a target container.
@@ -1688,6 +1757,10 @@ const Sessions = (() => {
         el.className = "msg msg-user";
         // Render image thumbnails and PDF badges (if any) followed by the text content
         let bubbleHtml = "";
+        if (Array.isArray(ev.references) && ev.references.length > 0) {
+          bubbleHtml += ev.references.map(_renderMentionBadge).join(" ");
+          if (ev.content || (Array.isArray(ev.images) && ev.images.length > 0)) bubbleHtml += "<br>";
+        }
         if (Array.isArray(ev.images) && ev.images.length > 0) {
           bubbleHtml += ev.images.map(src => {
             if (src && src.startsWith("pdf:")) {
@@ -2143,6 +2216,7 @@ const Sessions = (() => {
     editBtn.innerHTML = EDIT_SVG;
     editBtn.addEventListener("click", async (e) => {
       e.stopPropagation();
+      if (_activeSessionIsRunning()) return;
       const ok = await Modal.confirmOnce(
         "clacky-edit-warn-dismissed",
         I18n.t("chat.edit.warn"),
@@ -2159,11 +2233,20 @@ const Sessions = (() => {
     wrap.appendChild(bar);
   }
 
-  function _refreshEditButtons(container) {
+  function _activeSessionIsRunning() {
+    return Sessions.find(Sessions.activeId)?.status === "running";
+  }
+
+  function _refreshEditButtons(container, status) {
+    const running = (status || Sessions.find(Sessions.activeId)?.status) === "running";
     const btns = Array.from(container.querySelectorAll(".msg-edit-btn"));
     btns.forEach((btn, i) => {
-      btn.style.display = i === btns.length - 1 ? "" : "none";
+      btn.style.display = !running && i === btns.length - 1 ? "" : "none";
     });
+
+    if (running) {
+      container.querySelectorAll(".msg-user.editing").forEach(el => _exitEditMode(el));
+    }
   }
 
   function _extractUserBubbleText(el) {
@@ -2173,7 +2256,7 @@ const Sessions = (() => {
   }
 
   function _enterEditMode(el) {
-    if (el.classList.contains("editing")) return;
+    if (_activeSessionIsRunning() || el.classList.contains("editing")) return;
     el.classList.add("editing");
 
     const originalHtml = el.dataset.originalHtml || "";
@@ -2249,6 +2332,10 @@ const Sessions = (() => {
   function _submitEdit(el, newContent) {
     if (!newContent) return;
     if (!Sessions.activeId) return;
+    if (_activeSessionIsRunning()) {
+      _exitEditMode(el);
+      return;
+    }
 
     const createdAt = el.dataset.createdAt || null;
 
@@ -2529,8 +2616,16 @@ const Sessions = (() => {
     // of the raw glyph.
     const CRON_NAME_PREFIXES = ["\u23F0 ", "\u25B6 "];
     const cronPrefix = CRON_NAME_PREFIXES.find(p => s.name && s.name.startsWith(p)) || "";
-    const displayName = (cronPrefix ? s.name.slice(cronPrefix.length) : s.name)
+    const storedName = (cronPrefix ? s.name.slice(cronPrefix.length) : s.name)
       || _relativeTime(s.created_at);
+    // Built-in setup sessions ship with fixed English names; localise their
+    // titles so they follow the UI language (existing sessions included).
+    const BUILTIN_SETUP_NAMES = {
+      "Onboard":           "sessions.setup.name",
+      "🌐 Browser Setup":   "sessions.setup.browser.name",
+    };
+    const nameKey = s.source === "setup" ? BUILTIN_SETUP_NAMES[storedName] : null;
+    const displayName = nameKey ? I18n.t(nameKey) : storedName;
     const cronIcon = cronPrefix
       ? `<svg class="session-cron-icon" 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"><circle cx="12" cy="13" r="8"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="M6.38 18.7 4 21"/><path d="M17.64 18.67 20 21"/><path d="m9 13 2 2 4-4"/></svg>`
       : "";
@@ -2958,11 +3053,12 @@ const Sessions = (() => {
       Sessions.renderList();
 
       try {
-        // Cursor: oldest activity time of non-pinned, non-grouped sessions.
-        // Grouped sessions are excluded from the normal list pagination and
-        // have their own independent cursor in each sub-view.
+        // Cursor: oldest activity time of non-pinned, non-grouped, non-project
+        // sessions. Project sessions sit in _sessions but render in their own
+        // section; counting them here would drag the cursor back to a stale
+        // timestamp and skip a whole page of regular sessions.
         const oldest = _sessions.reduce((min, s) => {
-          if (s.pinned || _groupOf(s)) return min;
+          if (s.pinned || s.project_id || _groupOf(s)) return min;
           const t = s.updated_at || s.created_at;
           if (!t) return min;
           return (!min || t < min) ? t : min;
@@ -3048,10 +3144,9 @@ const Sessions = (() => {
      *  search overlay. Never touches the sidebar session list (_sessions). */
     async commitSearch() {
       const qEl    = document.getElementById("session-search-q");
-      const typeEl = document.getElementById("session-search-type");
       const dateEl = document.getElementById("session-search-date");
       if (qEl)    _filter.q    = qEl.value.trim();
-      if (typeEl) _filter.type = typeEl.value;
+      if (_searchTypeSelect) _filter.type = _searchTypeSelect.value;
       if (dateEl) _filter.date = dateEl.dataset.value || "";
 
       const token = ++_searchToken;
@@ -3127,6 +3222,7 @@ const Sessions = (() => {
       const el  = document.getElementById(ids[key]);
       if (el) {
         if (key === "date") DatePicker.clear(el);
+        else if (key === "type" && _searchTypeSelect) _searchTypeSelect.setValue("");
         else el.value = "";
       }
       await Sessions.commitSearch();
@@ -3213,10 +3309,9 @@ const Sessions = (() => {
           // Reset inputs + filter state so the next open starts clean.
           const qEl = document.getElementById("session-search-q");
           const dEl = document.getElementById("session-search-date");
-          const tEl = document.getElementById("session-search-type");
           if (qEl) qEl.value = "";
           if (dEl) DatePicker.clear(dEl);
-          if (tEl) tEl.value = "";
+          if (_searchTypeSelect) _searchTypeSelect.setValue("");
           const qClear = document.getElementById("btn-search-q-clear");
           if (qClear) qClear.hidden = true;
           _filter.q = _filter.date = _filter.type = "";
@@ -3330,9 +3425,7 @@ const Sessions = (() => {
       }
       const input = $("user-input");
       if (input) {
-        input.value = _drafts.get(id) || "";
-        input.style.height = "auto";
-        if (input.value) input.style.height = Math.min(input.scrollHeight, 200) + "px";
+        Composer.setText(input, _drafts.get(id) || "");
       }
       const draft = _attachmentDrafts.get(id);
       if (draft) {
@@ -3364,7 +3457,7 @@ const Sessions = (() => {
       _cacheActiveMessages();
       if (_activeId) {
         const input = $("user-input");
-        if (input) _drafts.set(_activeId, input.value);
+        if (input) _drafts.set(_activeId, Composer.text(input));
         _attachmentDrafts.set(_activeId, { images: _pendingImages.splice(0), files: _pendingFiles.splice(0) });
         _renderAttachmentPreviews();
         Sessions._detachProgressUI(_activeId);
@@ -3427,7 +3520,11 @@ const Sessions = (() => {
           return !t || t < latest;
         };
         const renderGroup = source => {
-          const rows = _sessions.filter(s => s.source === source && !s.project_id);
+          // Scan _extraSessions too: a session created by the backend (e.g. a
+          // scheduler run) only reaches the client as a session_update, which
+          // patch() stores there — it would otherwise never light the dot.
+          const inGroup = s => s.source === source && !s.project_id;
+          const rows = _sessions.filter(inGroup).concat(_extraSessions.filter(inGroup));
           const dotStatus = ["running", "awaiting_feedback"].find(st => rows.some(s => s.status === st))
             || (rows.some(s => _recentlyDone.has(s.id)) ? "done" : null);
           _renderGroupItem(list, source, _groups.get(source).count, dotStatus);
@@ -3562,7 +3659,7 @@ 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>`;
       const iconMoveToProject = `<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="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"/><path d="M8 13h8"/><path d="m13 10 3 3-3 3"/></svg>`;
-      const iconChevronRight = `<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>`;
+      const iconChevronRight = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>`;
       const iconFolderPlus = `<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="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"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>`;
       const iconRemoveFromProject = `<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="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"/><path d="M5 13h8"/><path d="m8 10 -3 3 3 3"/></svg>`;
 
@@ -3587,8 +3684,9 @@ const Sessions = (() => {
         submenuItemsHtml = projects.map(p => {
           const colorAttr = p.color ? ` style="color:${escapeHtml(p.color)}"` : "";
           const projectIcon = Projects.getIconSvg(p.icon || "folder", 14);
-          const check = session.project_id === p.id ? `<span class="session-actions-submenu-check">\u2713</span>` : "";
-          return `<div class="session-actions-submenu-item" data-project-id="${escapeHtml(String(p.id))}">
+          const isSelected = session.project_id === p.id;
+          const check = isSelected ? `<span class="session-actions-submenu-check">\u2713</span>` : "";
+          return `<div class="session-actions-submenu-item${isSelected ? " selected" : ""}" data-project-id="${escapeHtml(String(p.id))}">
             <span class="session-actions-submenu-icon"${colorAttr}>${projectIcon}</span>
             <span class="session-actions-submenu-label">${escapeHtml(p.name)}</span>
             ${check}
@@ -3814,9 +3912,10 @@ const Sessions = (() => {
 
     updateStatusBar(status) {
       // chat-header was removed; status text is now shown in the bottom session-info-bar (#sib-status).
-      // Here we only update the interrupt button visibility.
+      // Here we update controls whose availability follows the active session status.
       const interrupt = $("btn-interrupt");
       if (interrupt) interrupt.style.display = status === "running" ? "" : "none";
+      _refreshEditButtons(RenderTarget.outer(), status);
 
       // Swap input placeholder so the user knows they can still send extra
       // info while the agent is working.
@@ -3827,7 +3926,7 @@ const Sessions = (() => {
           ? (mobile ? "chat.input.placeholderRunningMobile" : "chat.input.placeholderRunning")
           : (mobile ? "chat.input.placeholderMobile"        : "chat.input.placeholder");
         inp.setAttribute("data-i18n-placeholder", key);
-        inp.setAttribute("placeholder", I18n.t(key));
+        Composer.setPlaceholder(inp, I18n.t(key));
       }
     },
 
@@ -4092,9 +4191,32 @@ const Sessions = (() => {
 
     // ── Message helpers ────────────────────────────────────────────────────
 
-    // Live tool group state (one active group per session at a time)
-    _liveToolGroup:     null,  // current open .tool-group DOM element
-    _liveLastToolItem:  null,  // last .tool-item added (for tool_result pairing)
+    // Live tool group state. For the outer stream this is a single pointer
+    // pair; for a phase body (concurrent fan-out) the pointers live on the
+    // body element itself, so N parallel subagents never share one group.
+    _liveToolGroup:     null,  // outer stream's open .tool-group DOM element
+    _liveLastToolItem:  null,  // outer stream's last .tool-item (for tool_result pairing)
+
+    // Resolve the tool-group pointers for a render container. The outer
+    // #messages node keeps its pointers on Sessions; any other container
+    // (a phase body) keeps its own on the element, isolating concurrent runs.
+    _toolGroupCtx(container) {
+      const outer = RenderTarget.outer();
+      if (!container || container === outer) {
+        return {
+          get group() { return Sessions._liveToolGroup; },
+          set group(v) { Sessions._liveToolGroup = v; },
+          get item() { return Sessions._liveLastToolItem; },
+          set item(v) { Sessions._liveLastToolItem = v; },
+        };
+      }
+      return {
+        get group() { return container._liveToolGroup || null; },
+        set group(v) { container._liveToolGroup = v; },
+        get item() { return container._liveLastToolItem || null; },
+        set item(v) { container._liveLastToolItem = v; },
+      };
+    },
 
     // Append a diff block to the message stream (for edit/write previews).
     appendDiff(rows, truncated, hiddenLines) {
@@ -4105,24 +4227,26 @@ const Sessions = (() => {
     // Creates the group if it doesn't exist yet.
     appendToolCall(name, args, summary) {
       const messages = RenderTarget.current();
-      if (!Sessions._liveToolGroup) {
-        Sessions._liveToolGroup = _makeToolGroup();
-        messages.appendChild(Sessions._liveToolGroup);
+      const ctx = Sessions._toolGroupCtx(messages);
+      if (!ctx.group) {
+        ctx.group = _makeToolGroup();
+        messages.appendChild(ctx.group);
       }
-      Sessions._liveLastToolItem = _addToolCallToGroup(Sessions._liveToolGroup, name, args, summary);
+      ctx.item = _addToolCallToGroup(ctx.group, name, args, summary);
       _scrollToBottomIfNeeded(messages);
     },
 
     // Update the last tool-item with a result status tick.
-    // If _liveToolGroup was collapsed by an intervening info message (e.g.
+    // If the tool group was collapsed by an intervening info message (e.g.
     // "Subagent start/completed" during invoke_skill), fall back to the last
     // still-running .tool-item in the DOM.
     appendToolResult(result) {
-      if (Sessions._liveToolGroup && Sessions._liveLastToolItem) {
-        _completeLastToolItem(Sessions._liveToolGroup, result);
+      const messages = RenderTarget.current();
+      const ctx = Sessions._toolGroupCtx(messages);
+      if (ctx.group && ctx.item) {
+        _completeLastToolItem(ctx.group, result);
         return;
       }
-      const messages = RenderTarget.current();
       if (messages) {
         const running = messages.querySelectorAll(".tool-item-status.running");
         if (running.length > 0) {
@@ -4136,12 +4260,13 @@ const Sessions = (() => {
     // Shows the stdout area automatically on first content.
     appendToolStdout(lines) {
       // Resolve the target tool-item.
-      // After a session switch, _liveLastToolItem is null because the messages pane
-      // was wiped and re-rendered from history.  In that case fall back to the last
-      // .tool-item visible in the DOM — that is the in-flight tool the stdout belongs to.
-      let toolItem = Sessions._liveLastToolItem;
+      // After a session switch, the live pointer is null because the messages
+      // pane was wiped and re-rendered from history. In that case fall back to
+      // the last .tool-item visible in the DOM — the in-flight tool the stdout
+      // belongs to.
+      const messages = RenderTarget.current();
+      let toolItem = Sessions._toolGroupCtx(messages).item;
       if (!toolItem) {
-        const messages = RenderTarget.current();
         if (messages) {
           const items = messages.querySelectorAll(".tool-item");
           if (items.length > 0) toolItem = items[items.length - 1];
@@ -4165,7 +4290,7 @@ const Sessions = (() => {
     // assistant turn with no tool calls).
     appendTokenUsage(ev, container, hostItem) {
       const messages = container || RenderTarget.current();
-      const host = hostItem || Sessions._liveLastToolItem || null;
+      const host = hostItem || Sessions._toolGroupCtx(messages).item || null;
       const el = document.createElement("div");
       el.className = "token-usage-line";
 
@@ -4233,12 +4358,15 @@ const Sessions = (() => {
       }
     },
 
-    // Collapse the live tool group (call when AI starts responding or task ends).
+    // Collapse the live tool group for the current render container (call when
+    // AI starts responding or task ends). Inside a pinned phase body this
+    // collapses that body's group; otherwise the outer stream's.
     collapseToolGroup() {
-      if (Sessions._liveToolGroup) {
-        _collapseToolGroup(Sessions._liveToolGroup);
-        Sessions._liveToolGroup    = null;
-        Sessions._liveLastToolItem = null;
+      const ctx = Sessions._toolGroupCtx(RenderTarget.current());
+      if (ctx.group) {
+        _collapseToolGroup(ctx.group);
+        ctx.group = null;
+        ctx.item = null;
       }
     },
 
@@ -4803,8 +4931,8 @@ const Sessions = (() => {
     },
 
     /** Register a message (optionally with attachments) to send after subscribe is confirmed. */
-    setPendingMessage(sessionId, content, display = null, files = null) {
-      _pendingMessage = { session_id: sessionId, content, display, files };
+    setPendingMessage(sessionId, content, display = null, files = null, references = null) {
+      _pendingMessage = { session_id: sessionId, content, display, files, references };
     },
 
     /** Consume and return the pending message (clears it). */
@@ -4831,42 +4959,6 @@ const Sessions = (() => {
 // ── Session Info Bar Model Switcher ───────────────────────────────────────
 (function() {
   let _isOpen = false;
-  // Cache of the most recent benchmark results, keyed by model_id. Kept at
-  // closure scope so the numbers survive closing & reopening the dropdown —
-  // the user shouldn't have to re-run the test just to peek at results. We
-  // intentionally do NOT persist this to disk: latency is a point-in-time
-  // measurement, and yesterday's numbers are misleading.
-  let _benchCache = {};        // { [model_id]: { ttft_ms, ok, error, ts } }
-  let _benchInFlight = false;  // prevent double-click spam
-
-  // Price-ratio badges for the submodel rows. Ratios come from
-  // GET /api/model_prices (backed by Clacky::ModelPricing), so the local
-  // pricing table stays the single source of truth - no hardcoded JS prices.
-  const _priceCache = new Map(); // model name -> { in, out, label } | null
-
-  function _fmtRatio(ratio) {
-    if (ratio >= 10) return Math.round(ratio) + "x";
-    const s = ratio >= 1 ? ratio.toFixed(1) : ratio.toFixed(2);
-    return s.replace(/\.?0+$/, "") + "x";
-  }
-
-  // Fetches ratios for names not yet cached. Rows simply stay blank when
-  // the request fails (offline, unknown model).
-  async function _loadPriceRatios(names) {
-    const missing = Array.from(new Set(names.filter(Boolean).filter((n) => !_priceCache.has(n))));
-    if (!missing.length) return;
-    try {
-      const res = await fetch("/api/model_prices?models=" + encodeURIComponent(missing.join(",")));
-      if (!res.ok) return;
-      const data = await res.json();
-      missing.forEach((n) => {
-        const p = data && data.prices && data.prices[n];
-        _priceCache.set(n, p ? { in: p.in, out: p.out, label: _fmtRatio(p.ratio) } : null);
-      });
-    } catch (e) {
-      /* network error - leave prices hidden */
-    }
-  }
 
   // Toggle model dropdown when clicking on model name
   document.addEventListener("click", async (e) => {
@@ -4880,7 +4972,7 @@ const Sessions = (() => {
       if (_isOpen) {
         dropdown.style.display = "none";
         _isOpen = false;
-        _closeSubmodelPanel();
+        ModelPicker.closeSubmodelPanel();
       } else {
         let subOptions = [];
         try { subOptions = JSON.parse(modelEl.dataset.subModelOptions || "[]"); } catch (_) {}
@@ -4890,13 +4982,13 @@ const Sessions = (() => {
           cardModel: modelEl.dataset.cardModel || null
         };
         await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.dataset.modelId || null, subInfo);
-        
+
         // Calculate position relative to the model element (fixed positioning)
         const rect = modelEl.getBoundingClientRect();
         dropdown.style.left = `${rect.left + rect.width / 2}px`;
         dropdown.style.top = `${rect.top - 6}px`; // 6px above the element
         dropdown.style.transform = "translate(-50%, -100%)"; // Center horizontally, move up by its own height
-        
+
         dropdown.style.display = "block";
         _isOpen = true;
       }
@@ -4908,7 +5000,7 @@ const Sessions = (() => {
       const dropdown = $("sib-model-dropdown");
       if (dropdown) dropdown.style.display = "none";
       _isOpen = false;
-      _closeSubmodelPanel();
+      ModelPicker.closeSubmodelPanel();
     }
   });
 
@@ -4919,306 +5011,41 @@ const Sessions = (() => {
     if (!dropdown) return;
 
     try {
-      console.log("[Model Switcher] Fetching /api/config...");
       const res = await fetch(`/api/config?session_id=${encodeURIComponent(sessionId)}`);
       const data = await res.json();
-      console.log("[Model Switcher] Received data:", data);
       const models = data.models || [];
       const mediaCaps = data.media_capabilities || {};
-      console.log("[Model Switcher] Models count:", models.length);
 
       if (models.length === 0) {
         dropdown.innerHTML = '<div style="padding:0.75rem;text-align:center;color:var(--color-text-secondary);font-size:0.6875rem;">No models configured</div>';
         return;
       }
 
-      dropdown.innerHTML = "";
-
-      // ── Benchmark floating button (top-right of dropdown) ──────────────
-      // Tiny ⚡ button pinned to the dropdown's top-right corner. Runs one
-      // concurrent request per model and back-fills each row's latency cell.
-      // We deliberately avoid a full-width banner — it ate visual space that
-      // the model list needs, and most users open the dropdown to SWITCH,
-      // not to benchmark. The floating button is discoverable but unobtrusive.
-      const bench = document.createElement("div");
-      bench.className = "sib-model-bench";
-      const btnLabel   = (typeof I18n !== "undefined") ? I18n.t("sib.bench.btn")     : "Benchmark";
-      const btnTooltip = (typeof I18n !== "undefined") ? I18n.t("sib.bench.tooltip") : "Test response latency for every configured model";
-      bench.innerHTML = `
-        <button type="button" class="sib-bench-btn" title="${btnTooltip}">⚡ <span class="sib-bench-label">${btnLabel}</span></button>
-        <span class="sib-bench-hint"></span>
-      `;
-      dropdown.appendChild(bench);
-
-      const benchBtn   = bench.querySelector(".sib-bench-btn");
-      const benchLabel = bench.querySelector(".sib-bench-label");
-      const benchHint  = bench.querySelector(".sib-bench-hint");
-      benchBtn.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        _runBenchmark(sessionId, dropdown, benchBtn, benchLabel, benchHint);
+      ModelPicker.populate(dropdown, {
+        models,
+        currentId: currentModelId,
+        mediaCaps,
+        subInfo,
+        onSelect: (m) => _switchModel(sessionId, m.id, m.model),
+        onSwitchSubModel: (name, displayName) => _switchSubModel(sessionId, name, displayName),
+        onBenchmark: () => _benchmarkSession(sessionId),
+        onConfigureMedia: _goConfigureMedia,
       });
-
-      // ── Model rows ─────────────────────────────────────────────────────
-      const _nameCounts = models.reduce((acc, m) => {
-        acc[m.model] = (acc[m.model] || 0) + 1;
-        return acc;
-      }, {});
-
-      models.forEach(m => {
-        console.log("[Model Switcher] Adding model:", m.model, "id:", m.id, "current:", currentModelId);
-        const opt = document.createElement("div");
-        opt.className = "sib-model-option";
-        opt.dataset.modelId = m.id;
-        if (m.id === currentModelId) opt.classList.add("current");
-
-        const left = document.createElement("span");
-        left.className = "sib-model-name";
-
-        const nameLine = document.createElement("span");
-        nameLine.className = "sib-model-name-main";
-        // When a non-default quick-switch model is active for the current row,
-        // show only that model's name (avoid the long "main → quick-switch"
-        // string that gets truncated).
-        const hasActiveOverride =
-          m.id === currentModelId &&
-          subInfo.current &&
-          subInfo.current !== subInfo.cardModel;
-        nameLine.textContent = hasActiveOverride ? subInfo.current : m.model;
-        left.appendChild(nameLine);
-
-        // Vision status for the active model only — follows whichever model is
-        // currently in effect (mediaCaps is computed for that same model).
-        if (m.id === currentModelId && mediaCaps.vision) {
-          const ok = !!mediaCaps.vision.configured;
-          const vis = document.createElement("span");
-          vis.className = "sib-model-vision " + (ok ? "is-ok" : "is-missing");
-          vis.textContent = ok ? I18n.t("sib.vision.ok") : I18n.t("sib.vision.missing");
-          vis.title = ok ? I18n.t("sib.vision.okTip") : I18n.t("sib.vision.missingTip");
-          left.appendChild(vis);
-        }
-
-        // Distinguish rows that would otherwise look identical: user-typed
-        // remark first (most explicit), then host/key when names collide.
-        const remark = (m.remark || "").trim();
-        if (remark || _nameCounts[m.model] > 1) {
-          left.classList.add("has-sub");
-          const host = (() => {
-            try { return new URL(m.base_url).host; } catch { return m.base_url || ""; }
-          })();
-          const subBits = [remark, host, m.api_key_masked].filter(Boolean);
-          if (subBits.length) {
-            const subLine = document.createElement("span");
-            subLine.className = "sib-model-name-sub";
-            subLine.textContent = subBits.join(" · ");
-            left.appendChild(subLine);
-            opt.title = `${m.model} · ${subBits.join(" · ")}`;
-          }
-        }
-
-        opt.appendChild(left);
-
-        const right = document.createElement("span");
-        right.className = "sib-model-right";
-
-        if (m.type === "default") {
-          const badge = document.createElement("span");
-          badge.className = `model-badge ${m.type}`;
-          badge.textContent = m.type;
-          right.appendChild(badge);
-        }
-
-        const lat = document.createElement("span");
-        lat.className = "sib-model-latency";
-        _fillLatencyCell(lat, _benchCache[m.id]);
-        right.appendChild(lat);
-
-        const hasSubModels =
-          m.id === currentModelId &&
-          subInfo.options &&
-          subInfo.options.length > 1;
-
-        if (hasSubModels) {
-          const toggleBtn = document.createElement("button");
-          toggleBtn.type = "button";
-          toggleBtn.className = "sib-submodel-toggle";
-          toggleBtn.title = I18n.t("sib.variant.header");
-          toggleBtn.setAttribute("aria-expanded", "false");
-          toggleBtn.innerHTML =
-            '<svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true">' +
-            '<path d="M6 3.5L10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' +
-            '</svg>';
-          right.appendChild(toggleBtn);
-
-          toggleBtn.addEventListener("click", (ev) => {
-            ev.stopPropagation();
-            _toggleSubmodelPanel(opt, toggleBtn, sessionId, subInfo);
-          });
-        }
-
-        opt.appendChild(right);
-
-        opt.addEventListener("click", () => _switchModel(sessionId, m.id, m.model));
-        dropdown.appendChild(opt);
-      });
-
-      _appendGenerationFooter(dropdown, mediaCaps);
-      console.log("[Model Switcher] Dropdown populated, children count:", dropdown.children.length);
     } catch (e) {
       console.error("Failed to load models:", e);
       dropdown.innerHTML = '<div style="padding:0.75rem;text-align:center;color:var(--color-error);font-size:0.6875rem;">Error loading models</div>';
     }
   }
 
-  // Footer for image/video/audio generation. These come only from dedicated
-  // sidecar models (the chat model can't generate media). We always show all
-  // three kinds — configured ones highlighted, the rest dimmed — plus a single
-  // Settings entry so users can add or change a generation model.
-  function _appendGenerationFooter(dropdown, mediaCaps) {
-    const kinds = ["image", "video", "audio"];
-    const footer = document.createElement("div");
-    footer.className = "sib-gen-footer";
-
-    const list = document.createElement("span");
-    list.className = "sib-gen-list";
-    kinds.forEach(k => {
-      const cap = mediaCaps[k] || {};
-      const ok = !!cap.configured;
-      const chip = document.createElement("span");
-      chip.className = "sib-gen-chip " + (ok ? "is-ok" : "is-off");
-      chip.textContent = (ok ? "✓ " : "") + I18n.t(`sib.gen.kind.${k}`);
-      chip.title = ok
-        ? I18n.t("sib.gen.okTip", { model: cap.model || "" })
-        : I18n.t("sib.gen.offTip");
-      list.appendChild(chip);
-    });
-    footer.appendChild(list);
-
-    const configBtn = document.createElement("button");
-    configBtn.type = "button";
-    configBtn.className = "sib-gen-config";
-    configBtn.textContent = I18n.t("sib.gen.config");
-    configBtn.title = I18n.t("sib.gen.offTip");
-    configBtn.addEventListener("click", (ev) => {
-      ev.stopPropagation();
-      _goConfigureMedia();
-    });
-    footer.appendChild(configBtn);
-
-    dropdown.appendChild(footer);
-  }
-
-  function _goConfigureMedia() {
-    const dropdown = $("sib-model-dropdown");
-    if (dropdown) dropdown.style.display = "none";
-    _isOpen = false;
-    _closeSubmodelPanel();
-    if (typeof Router !== "undefined") Router.navigate("settings");
-    setTimeout(() => {
-      const sec = document.getElementById("media-section");
-      if (sec) sec.scrollIntoView({ behavior: "smooth", block: "start" });
-    }, 200);
-  }
-
-  // Render one latency cell based on a cached result.
-  //   undefined    → empty slot (never tested / in-flight starts from here)
-  //   { ok:true }  → "812ms" in green/amber/red per threshold
-  //   { ok:false } → "✕" with error in tooltip
-  //   { pending:true } → "…" spinner-ish marker
-  function _fillLatencyCell(el, entry) {
-    el.className = "sib-model-latency";
-    el.textContent = "";
-    el.removeAttribute("title");
-    if (!entry) return;
-    if (entry.pending) {
-      el.textContent = "…";
-      el.classList.add("is-pending");
-      return;
-    }
-    if (!entry.ok) {
-      el.textContent = "✕";
-      el.classList.add("is-err");
-      el.title = entry.error || "failed";
-      return;
-    }
-    const ms = entry.ttft_ms;
-    // Same thresholds as the sib-signal status bar — keep them aligned so
-    // "3 bars in the status bar" ≈ "green number in the picker".
-    // We measure full non-streaming response time (not real TTFT), so ≤60s is
-    // normal, ≤120s is slow, beyond is bad. ≤2s still gets the "feels instant"
-    // green treatment like the 4-bar signal.
-    let cls = "is-bad";
-    if      (ms <= 2000)   cls = "is-ok";
-    else if (ms <= 60000)  cls = "is-ok";
-    else if (ms <= 120000) cls = "is-warn";
-    el.classList.add(cls);
-    el.textContent = ms >= 1000 ? (ms / 1000).toFixed(1) + "s" : ms + "ms";
-    if (typeof I18n !== "undefined") {
-      el.title = I18n.t("sib.bench.latencyTooltip", {
-        ttft: el.textContent,
-        time: new Date(entry.ts).toLocaleTimeString(),
-      });
-    } else {
-      el.title = `TTFT ${el.textContent} · tested ${new Date(entry.ts).toLocaleTimeString()}`;
-    }
-  }
-
-  async function _runBenchmark(sessionId, dropdown, btn, label, hint) {
-    if (_benchInFlight) return;
-    _benchInFlight = true;
-    btn.disabled = true;
-    const origLabel = label.textContent;
-    const _t = (key, vars) => (typeof I18n !== "undefined") ? I18n.t(key, vars) : key;
-    label.textContent = _t("sib.bench.running");
-    hint.textContent = "";
-
-    // Mark every row as pending so the user sees instant feedback instead of
-    // a silent button. _fillLatencyCell handles the visual treatment.
-    dropdown.querySelectorAll(".sib-model-option").forEach(opt => {
-      const id = opt.dataset.modelId;
-      if (!id) return;
-      _benchCache[id] = { pending: true };
-      _fillLatencyCell(opt.querySelector(".sib-model-latency"), _benchCache[id]);
-    });
-
-    const t0 = performance.now();
-    try {
-      const res = await fetch(`/api/sessions/${sessionId}/benchmark`, { method: "POST" });
-      const data = await res.json();
-      if (!res.ok || !data.ok) throw new Error(data.error || "benchmark failed");
-
-      const now = Date.now();
-      (data.results || []).forEach(r => {
-        _benchCache[r.model_id] = {
-          ok: !!r.ok,
-          ttft_ms: r.ttft_ms,
-          error: r.error,
-          ts: now,
-        };
-        const opt = dropdown.querySelector(`.sib-model-option[data-model-id="${CSS.escape(r.model_id)}"]`);
-        if (opt) _fillLatencyCell(opt.querySelector(".sib-model-latency"), _benchCache[r.model_id]);
-      });
-
-      const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
-      hint.textContent = _t("sib.bench.done", { t: elapsed });
-    } catch (e) {
-      console.error("Benchmark failed:", e);
-      hint.textContent = _t("sib.bench.failed", { msg: e.message });
-      // Clear pending markers so rows don't stay stuck on "…"
-      dropdown.querySelectorAll(".sib-model-option").forEach(opt => {
-        const id = opt.dataset.modelId;
-        if (id && _benchCache[id]?.pending) {
-          _benchCache[id] = undefined;
-          _fillLatencyCell(opt.querySelector(".sib-model-latency"), undefined);
-        }
-      });
-    } finally {
-      _benchInFlight = false;
-      btn.disabled = false;
-      label.textContent = origLabel;
-    }
+  // Fetch benchmark results for a session. The benchmark UI (pending markers,
+  // latency cells) lives in ModelPicker; this only supplies the request.
+  async function _benchmarkSession(sessionId) {
+    const res = await fetch(`/api/sessions/${sessionId}/benchmark`, { method: "POST" });
+    const data = await res.json();
+    if (!res.ok || !data.ok) throw new Error(data.error || "benchmark failed");
+    return data.results;
   }
 
-  // Switch session model via API
   // Switch the session's current card. modelId is the stable runtime id,
   // modelName is for optimistic display.
   async function _switchModel(sessionId, modelId, modelName) {
@@ -5227,7 +5054,7 @@ const Sessions = (() => {
       dropdown.style.display = "none";
       _isOpen = false;
     }
-    _closeSubmodelPanel();
+    ModelPicker.closeSubmodelPanel();
 
     try {
       const res = await fetch(`/api/sessions/${sessionId}/model`, {
@@ -5246,8 +5073,7 @@ const Sessions = (() => {
       // backend emits inside this same request. Don't touch sibModel here:
       // the broadcast typically arrives BEFORE this fetch resolves (WS frame
       // vs HTTP response on separate TCP streams), so writing here would
-      // overwrite the already-correct value with an incomplete one (this
-      // function only knows the card name, not whether a sub-model is pinned).
+      // overwrite the already-correct value with an incomplete one.
 
       console.log(`Switched session ${sessionId} to model ${modelName} (${modelId})`);
     } catch (e) {
@@ -5264,7 +5090,7 @@ const Sessions = (() => {
       dropdown.style.display = "none";
       _isOpen = false;
     }
-    _closeSubmodelPanel();
+    ModelPicker.closeSubmodelPanel();
 
     try {
       const res = await fetch(`/api/sessions/${sessionId}/submodel`, {
@@ -5276,145 +5102,24 @@ const Sessions = (() => {
       if (!res.ok) throw new Error(data.error || "Unknown error");
 
       // The status bar is updated by the session_update broadcast that the
-      // backend emits inside this same request. Don't touch sibModel here:
-      // the broadcast typically arrives BEFORE this fetch resolves, so any
-      // write here would race with (and often overwrite) the correct value.
+      // backend emits inside this same request. Don't touch sibModel here.
     } catch (e) {
       console.error("Failed to switch sub-model:", e);
       alert("Failed to switch sub-model: " + e.message);
     }
   }
 
-  let _activeSubmodelAnchor = null;
-
-  function _closeSubmodelPanel() {
-    const panel = $("sib-submodel-panel");
-    if (panel) panel.style.display = "none";
-    if (_activeSubmodelAnchor) {
-      const btn = _activeSubmodelAnchor.querySelector(".sib-submodel-toggle");
-      if (btn) btn.setAttribute("aria-expanded", "false");
-      _activeSubmodelAnchor.classList.remove("submodel-open");
-      _activeSubmodelAnchor = null;
-    }
-  }
-
-  function _toggleSubmodelPanel(anchorRow, btn, sessionId, subInfo) {
-    const panel = $("sib-submodel-panel");
+  // Navigate to media config.
+  function _goConfigureMedia() {
     const dropdown = $("sib-model-dropdown");
-    if (!panel || !dropdown) return;
-
-    if (panel.parentElement !== document.body) {
-      document.body.appendChild(panel);
-    }
-
-    const isOpen = panel.style.display !== "none" && _activeSubmodelAnchor === anchorRow;
-    if (isOpen) {
-      _closeSubmodelPanel();
-      return;
-    }
-
-    _renderSubmodelPanel(panel, sessionId, subInfo);
-
-    // Reset any prior position so measurements are accurate.
-    panel.style.left = "0px";
-    panel.style.top = "0px";
-    panel.style.display = "block";
-    panel.style.visibility = "hidden";
-
-    const dropRect = dropdown.getBoundingClientRect();
-    const btnRect = btn.getBoundingClientRect();
-    const panelRect = panel.getBoundingClientRect();
-    const gap = 6;
-    const margin = 8;
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-
-    // Prefer right of dropdown; flip to left if we'd overflow viewport.
-    let left = dropRect.right + gap;
-    if (left + panelRect.width > vw - margin) {
-      left = dropRect.left - panelRect.width - gap;
-    }
-    // If still off-screen on the left, clamp inside viewport.
-    if (left < margin) left = margin;
-
-    // Vertically align to the chevron button, but clamp inside viewport.
-    let top = btnRect.top - 6;
-    if (top + panelRect.height > vh - margin) {
-      top = vh - margin - panelRect.height;
-    }
-    if (top < margin) top = margin;
-
-    panel.style.left = `${left}px`;
-    panel.style.top = `${top}px`;
-    panel.style.visibility = "";
-
-    _activeSubmodelAnchor = anchorRow;
-    anchorRow.classList.add("submodel-open");
-    btn.setAttribute("aria-expanded", "true");
-  }
-
-  function _renderSubmodelPanel(panel, sessionId, subInfo) {
-    panel.innerHTML = "";
-
-    const header = document.createElement("div");
-    header.className = "sib-submodel-panel-header";
-    header.textContent = I18n.t("sib.variant.header");
-    panel.appendChild(header);
-
-    const cardDefault = subInfo.cardModel;
-    subInfo.options.forEach(name => {
-      const row = document.createElement("div");
-      row.className = "sib-submodel-row";
-      row.dataset.subModel = name;
-
-      const isActive = subInfo.current
-        ? name === subInfo.current
-        : name === cardDefault;
-      if (isActive) row.classList.add("current");
-
-      const nameEl = document.createElement("span");
-      nameEl.className = "sib-submodel-row-name";
-      nameEl.textContent = name;
-      row.appendChild(nameEl);
-
-      const rightBox = document.createElement("span");
-      rightBox.style.cssText = "display:inline-flex;align-items:center;gap:0.375rem;flex-shrink:0;";
-
-      const priceEl = document.createElement("span");
-      priceEl.className = "sib-model-price";
-      rightBox.appendChild(priceEl);
-
-      if (name === cardDefault) {
-        const tag = document.createElement("span");
-        tag.className = "sib-submodel-default-tag";
-        tag.textContent = I18n.t("sib.variant.default");
-        rightBox.appendChild(tag);
-      }
-      row.appendChild(rightBox);
-
-      row.addEventListener("click", (ev) => {
-        ev.stopPropagation();
-        const passName = (name === cardDefault) ? null : name;
-        _switchSubModel(sessionId, passName, name);
-      });
-      panel.appendChild(row);
-    });
-
-    _fillSubmodelPrices(panel);
-  }
-
-  // Ratio text fills in asynchronously once /api/model_prices responds
-  // (cached afterwards, so re-opening the panel shows prices instantly).
-  async function _fillSubmodelPrices(panel) {
-    const rows = Array.from(panel.querySelectorAll(".sib-submodel-row"));
-    await _loadPriceRatios(rows.map((r) => r.dataset.subModel));
-    rows.forEach((row) => {
-      const price = _priceCache.get(row.dataset.subModel);
-      const el = row.querySelector(".sib-model-price");
-      if (!price || !el || el.textContent) return;
-      el.textContent = price.label;
-      el.title = I18n.t("sib.price.tip", { in: price.in, out: price.out });
-    });
+    if (dropdown) dropdown.style.display = "none";
+    _isOpen = false;
+    ModelPicker.closeSubmodelPanel();
+    if (typeof Router !== "undefined") Router.navigate("settings");
+    setTimeout(() => {
+      const sec = document.getElementById("media-section");
+      if (sec) sec.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 200);
   }
 })();
 
@@ -5424,6 +5129,30 @@ 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>';
+  const ICON_DRIVE_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"><line x1="22" y1="12" x2="2" y2="12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/><line x1="6" y1="16" x2="6.01" y2="16"/><line x1="10" y1="16" x2="10.01" y2="16"/></svg>';
+  const ICON_STAR_SVG   = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.6L14.84 8.35L21.18 9.27L16.59 13.74L17.67 20.05L12 17.07L6.33 20.05L7.41 13.74L2.82 9.27L9.16 8.35L12 2.6Z"/></svg>';
+  const DIR_FAVORITES_STORAGE_KEY = "clacky-directory-favorites";
+
+  function normalizeFavoritePath(path) {
+    return (path || "").trim().replaceAll("\\", "/").replace(/\/+$/, "") || "/";
+  }
+
+  function loadDirectoryFavorites() {
+    try {
+      const paths = JSON.parse(localStorage.getItem(DIR_FAVORITES_STORAGE_KEY) || "[]");
+      if (!Array.isArray(paths)) return [];
+      return [...new Set(paths.filter(path => typeof path === "string" && path.trim()).map(normalizeFavoritePath))];
+    } catch (_e) {
+      return [];
+    }
+  }
+
+  function saveDirectoryFavorites(paths) {
+    try {
+      localStorage.setItem(DIR_FAVORITES_STORAGE_KEY, JSON.stringify(paths));
+    } catch (_e) {}
+  }
+
   function showDirectoryPicker(currentDir, sessionId) {
     return new Promise((resolve) => {
       const t = (key, fallback) => {
@@ -5435,11 +5164,17 @@ const Sessions = (() => {
       // real filesystem via /api/dirs instead of the session-scoped files API.
       const sessionLess = !sessionId;
 
+      let currentPath = currentDir;
       let selectedPath = currentDir;
+      let currentHasChildDirs = false;
       let rootDir = ""; // absolute path of the session's working directory
       let homeDir = ""; // user home, used as a quick preset
       let defaultDir = ""; // default workspace from agent_config (or fallback)
       let showHidden = false;
+      let placesLoaded = false;
+      let currentPathLoaded = false;
+      let sidebarPlaces = [];
+      let directoryFavorites = loadDirectoryFavorites();
 
       // Fetch directory entries from API, returns dirs with absolute paths
       async function fetchDirs(relPath, absolute = false) {
@@ -5453,9 +5188,14 @@ const Sessions = (() => {
           rootDir = data.root || rootDir;
           homeDir = data.home || homeDir;
           defaultDir = data.default || defaultDir;
+          if (!placesLoaded && data.places) {
+            placesLoaded = true;
+            sidebarPlaces = data.places;
+            renderSidebar();
+          }
           const dirs = (data.entries || []).filter(e => e.type === "dir");
           dirs.forEach(d => { d.absPath = d.path; d.absolute = true; });
-          return dirs;
+          return { dirs, resolvedPath: data.path || data.root || relPath, exact: data.exact };
         }
         let url = `/api/sessions/${encodeURIComponent(sessionId)}/files?path=${encodeURIComponent(relPath || "")}`;
         if (absolute) url += "&absolute=true";
@@ -5467,6 +5207,11 @@ const Sessions = (() => {
         if (!absolute) rootDir = data.root || rootDir;
         homeDir = data.home || homeDir;
         defaultDir = data.default || defaultDir;
+        if (!placesLoaded && data.places) {
+          placesLoaded = true;
+          sidebarPlaces = data.places;
+          renderSidebar();
+        }
         const dirs = (data.entries || []).filter(e => e.type === "dir");
         // Convert relative paths to absolute
         dirs.forEach(d => {
@@ -5474,7 +5219,8 @@ const Sessions = (() => {
           const cleanPath = d.path.replace(/^\/+/, "");
           d.absPath = absolute ? ("/" + cleanPath) : (rootDir.replace(/\/+$/, "") + "/" + cleanPath);
           d.absolute = absolute; // Store absolute flag for child expansion
-        });        return dirs;
+        });
+        return { dirs, resolvedPath: data.path || data.root || relPath, exact: true };
       }
 
       // Build a flat list row for a directory entry (Finder-style)
@@ -5507,7 +5253,6 @@ const Sessions = (() => {
             listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
             row.classList.add("selected");
             selectedPath = entry.absPath;
-            refreshBreadcrumb(entry.absPath);
           }, 200);
         });
 
@@ -5532,35 +5277,56 @@ const Sessions = (() => {
       const modal = document.createElement("div");
       modal.className = "modal-content dp-modal";
 
+      // Left sidebar — quick-access places (favorites + locations)
+      const sidebar = document.createElement("div");
+      sidebar.className = "dp-sidebar";
+      sidebar.innerHTML = `<div class="dp-sidebar-label">${t("sib.dir.favorites", "快捷访问")}</div>`;
+
+      // Main column — toolbar + list + footer
+      const main = document.createElement("div");
+      main.className = "dp-main";
+
       // ── Toolbar ──────────────────────────────────────────────────────
       const toolbar = document.createElement("div");
       toolbar.className = "dp-toolbar";
 
-      // Back / Forward buttons
+      // Back / Forward / Refresh 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.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12H2"/><path d="m9 4-7 8 7 8"/></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.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="m15 4 7 8-7 8"/></svg>`;
       fwdBtn.disabled = true;
 
+      const refreshBtn = document.createElement("button");
+      refreshBtn.className = "dp-nav-btn";
+      refreshBtn.title = t("sib.dir.refresh", "刷新");
+      refreshBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path transform="translate(3.5 3.5) scale(0.0166015625)" d="M914.17946 324.34283C854.308387 324.325508 750.895846 324.317788 750.895846 324.317788 732.045471 324.317788 716.764213 339.599801 716.764213 358.451121 716.764213 377.30244 732.045471 392.584453 750.895846 392.584453L955.787864 392.584453C993.448095 392.584453 1024 362.040424 1024 324.368908L1024 119.466667C1024 100.615347 1008.718742 85.333333 989.868367 85.333333 971.017993 85.333333 955.736735 100.615347 955.736735 119.466667L955.736735 256.497996C933.314348 217.628194 905.827487 181.795372 873.995034 149.961328 778.623011 54.584531 649.577119 0 511.974435 0 229.218763 0 0 229.230209 0 512 0 794.769791 229.218763 1024 511.974435 1024 794.730125 1024 1023.948888 794.769791 1023.948888 512 1023.948888 493.148681 1008.66763 477.866667 989.817256 477.866667 970.966881 477.866667 955.685623 493.148681 955.685623 512 955.685623 757.067153 757.029358 955.733333 511.974435 955.733333 266.91953 955.733333 68.263265 757.067153 68.263265 512 68.263265 266.932847 266.91953 68.266667 511.974435 68.266667 631.286484 68.266667 743.028524 115.531923 825.725634 198.233152 862.329644 234.839003 892.298522 277.528256 914.17946 324.34283L914.17946 324.34283Z" stroke="currentColor" stroke-width="35" stroke-linejoin="round"/></svg>`;
+
       const navBtns = document.createElement("div");
       navBtns.className = "dp-nav-btns";
       navBtns.appendChild(backBtn);
       navBtns.appendChild(fwdBtn);
+      navBtns.appendChild(refreshBtn);
 
       // Breadcrumb
       const breadcrumb = document.createElement("div");
       breadcrumb.className = "dp-breadcrumb";
 
+      const favoriteBtn = document.createElement("button");
+      favoriteBtn.className = "dp-nav-btn dp-favorite-btn";
+      favoriteBtn.innerHTML = ICON_STAR_SVG;
+      favoriteBtn.disabled = true;
+
       toolbar.appendChild(navBtns);
       toolbar.appendChild(breadcrumb);
-      modal.appendChild(toolbar);
+      toolbar.appendChild(favoriteBtn);
+      main.appendChild(toolbar);
 
       // ── Column header ─────────────────────────────────────────────────
       const colHeader = document.createElement("div");
@@ -5580,13 +5346,13 @@ const Sessions = (() => {
       hiddenToggle.appendChild(hiddenLabelText);
       colHeader.appendChild(colName);
       colHeader.appendChild(hiddenToggle);
-      modal.appendChild(colHeader);
+      main.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);
+      main.appendChild(listContainer);
 
       // ── Footer ────────────────────────────────────────────────────────
       const footer = document.createElement("div");
@@ -5613,7 +5379,10 @@ const Sessions = (() => {
       footerActions.appendChild(confirmButton);
       footer.appendChild(newFolderBtn);
       footer.appendChild(footerActions);
-      modal.appendChild(footer);
+      main.appendChild(footer);
+
+      modal.appendChild(sidebar);
+      modal.appendChild(main);
 
       overlay.appendChild(modal);
       document.body.appendChild(overlay);
@@ -5621,71 +5390,320 @@ const Sessions = (() => {
       // ── History stack for back/fwd ────────────────────────────────────
       const history = [];
       let historyIndex = -1;
+      let breadcrumbMenu = null;
+      let breadcrumbMenuAnchor = null;
+      let breadcrumbMenuRequest = 0;
 
       function refreshNavBtns() {
         backBtn.disabled = historyIndex <= 0;
         fwdBtn.disabled  = historyIndex >= history.length - 1;
       }
 
-      // Build breadcrumb from an absolute path
+      // Render the sidebar quick-access favorites + drives
+      function renderSidebar() {
+        sidebar.innerHTML = "";
+
+        const quickAccess = sidebarPlaces.filter(p => p.kind !== "drive");
+        const drives = sidebarPlaces.filter(p => p.kind === "drive");
+
+        const addSection = (labelKey, labelFallback, items) => {
+          if (!items.length) return;
+          const label = document.createElement("div");
+          label.className = "dp-sidebar-label";
+          label.textContent = t(labelKey, labelFallback);
+          sidebar.appendChild(label);
+          items.forEach(place => sidebar.appendChild(buildSidebarItem(place)));
+        };
+
+        addSection("sib.dir.favorites", "Quick access", quickAccess);
+        if (directoryFavorites.length) {
+          const label = document.createElement("div");
+          label.className = "dp-sidebar-label";
+          label.textContent = t("sib.dir.userFavorites", "My favorites");
+          sidebar.appendChild(label);
+          directoryFavorites.forEach(path => sidebar.appendChild(buildFavoriteSidebarItem(path)));
+        }
+        addSection("sib.dir.drives", "Drives", drives);
+      }
+
+      function buildSidebarItem(place) {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "dp-sidebar-item";
+        item.title = place.path;
+
+        const icon = document.createElement("span");
+        icon.className = "dp-sidebar-icon";
+        icon.innerHTML = place.kind === "drive" ? ICON_DRIVE_SVG : ICON_FOLDER_SVG;
+
+        const name = document.createElement("span");
+        name.className = "dp-sidebar-name";
+
+        let label = place.label;
+        if (!label && place.kind === "drive" && place.letter) {
+          label = I18n.t("sib.dir.places.drive", { letter: place.letter });
+        }
+        if (!label) label = t("sib.dir.places." + place.id, place.path);
+        name.textContent = label;
+
+        item.appendChild(icon);
+        item.appendChild(name);
+        item.addEventListener("click", () => navigateTo(place.path, true));
+        return item;
+      }
+
+      function buildFavoriteSidebarItem(path) {
+        const item = document.createElement("div");
+        item.className = "dp-sidebar-favorite";
+        item.title = path;
+
+        const openButton = document.createElement("button");
+        openButton.type = "button";
+        openButton.className = "dp-sidebar-item dp-sidebar-favorite-open";
+
+        const icon = document.createElement("span");
+        icon.className = "dp-sidebar-icon";
+        icon.innerHTML = ICON_FOLDER_SVG;
+
+        const name = document.createElement("span");
+        name.className = "dp-sidebar-name";
+        name.textContent = path === "/" ? "/" : path.split("/").filter(Boolean).pop() || path;
+
+        const removeButton = document.createElement("button");
+        removeButton.type = "button";
+        removeButton.className = "dp-sidebar-favorite-remove";
+        removeButton.title = t("sib.dir.removeFavorite", "Remove from favorites");
+        removeButton.setAttribute("aria-label", removeButton.title);
+        removeButton.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" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+
+        openButton.appendChild(icon);
+        openButton.appendChild(name);
+        openButton.addEventListener("click", () => navigateTo(path, true));
+        removeButton.addEventListener("click", (e) => {
+          e.stopPropagation();
+          directoryFavorites = directoryFavorites.filter(favorite => favorite !== path);
+          saveDirectoryFavorites(directoryFavorites);
+          renderSidebar();
+          refreshFavoriteButton();
+        });
+
+        item.appendChild(openButton);
+        item.appendChild(removeButton);
+        return item;
+      }
+
+      function refreshFavoriteButton() {
+        const path = normalizeFavoritePath(currentPath);
+        const isFavorite = directoryFavorites.includes(path);
+        favoriteBtn.disabled = !currentPathLoaded;
+        favoriteBtn.classList.toggle("active", isFavorite);
+        favoriteBtn.setAttribute("aria-pressed", isFavorite ? "true" : "false");
+        favoriteBtn.title = t(
+          isFavorite ? "sib.dir.removeFavorite" : "sib.dir.addFavorite",
+          isFavorite ? "Remove from favorites" : "Add to favorites"
+        );
+        favoriteBtn.setAttribute("aria-label", favoriteBtn.title);
+      }
+
+      function closeBreadcrumbMenu() {
+        breadcrumbMenuRequest++;
+        breadcrumbMenu?.remove();
+        breadcrumbMenuAnchor?.classList.remove("open");
+        breadcrumbMenu = null;
+        breadcrumbMenuAnchor = null;
+      }
+
+      function positionBreadcrumbMenu(menu, anchor) {
+        const rect = anchor.getBoundingClientRect();
+        const maxLeft = Math.max(8, window.innerWidth - menu.offsetWidth - 8);
+        menu.style.left = `${Math.min(rect.left, maxLeft)}px`;
+        menu.style.top = `${rect.bottom + 4}px`;
+      }
+
+      async function toggleBreadcrumbMenu(anchor, parentPath) {
+        if (breadcrumbMenuAnchor === anchor) {
+          closeBreadcrumbMenu();
+          return;
+        }
+
+        closeBreadcrumbMenu();
+        const requestId = breadcrumbMenuRequest;
+        const menu = document.createElement("div");
+        menu.className = "dp-bc-menu";
+        menu.innerHTML = `<div class="dp-bc-menu-state">${t("sib.dir.loading", "Loading…")}</div>`;
+        overlay.appendChild(menu);
+        breadcrumbMenu = menu;
+        breadcrumbMenuAnchor = anchor;
+        anchor.classList.add("open");
+        positionBreadcrumbMenu(menu, anchor);
+
+        try {
+          const { dirs } = await fetchDirs(parentPath, true);
+          if (requestId !== breadcrumbMenuRequest || breadcrumbMenu !== menu) return;
+          menu.innerHTML = "";
+          if (dirs.length === 0) {
+            menu.innerHTML = `<div class="dp-bc-menu-state">${t("sib.dir.empty", "Empty directory")}</div>`;
+          } else {
+            dirs.forEach(entry => {
+              const item = document.createElement("button");
+              item.type = "button";
+              item.className = "dp-bc-menu-item";
+              item.innerHTML = `<span class="dp-bc-menu-icon">${ICON_FOLDER_SVG}</span>`;
+              const label = document.createElement("span");
+              label.className = "dp-bc-menu-name";
+              label.textContent = entry.name;
+              item.appendChild(label);
+              item.addEventListener("click", (e) => {
+                e.stopPropagation();
+                closeBreadcrumbMenu();
+                navigateTo(entry.absPath, true);
+              });
+              menu.appendChild(item);
+            });
+          }
+          positionBreadcrumbMenu(menu, anchor);
+        } catch (err) {
+          if (requestId !== breadcrumbMenuRequest || breadcrumbMenu !== menu) return;
+          console.error("dir picker breadcrumb load failed:", err);
+          menu.innerHTML = `<div class="dp-bc-menu-state dp-bc-menu-error">${t("sib.dir.loadError", "Failed to load")}</div>`;
+          positionBreadcrumbMenu(menu, anchor);
+        }
+      }
+
+      function appendBreadcrumbPart(label, targetPath, current = false, showArrow = true) {
+        const seg = document.createElement("button");
+        seg.type = "button";
+        seg.className = "dp-bc-seg";
+        if (current) seg.classList.add("dp-bc-current");
+        seg.textContent = label;
+        seg.title = targetPath;
+        seg.addEventListener("click", (e) => {
+          e.stopPropagation();
+          navigateTo(targetPath, true);
+        });
+
+        breadcrumb.appendChild(seg);
+        if (showArrow) {
+          const arrow = document.createElement("button");
+          arrow.type = "button";
+          arrow.className = "dp-bc-sep";
+          arrow.title = targetPath;
+          arrow.innerHTML = ICON_CARET_SVG;
+          arrow.addEventListener("click", (e) => {
+            e.stopPropagation();
+            toggleBreadcrumbMenu(arrow, targetPath);
+          });
+          breadcrumb.appendChild(arrow);
+        }
+      }
+
+      // Build a Windows-style breadcrumb from an absolute path.
       function refreshBreadcrumb(absPath) {
+        closeBreadcrumbMenu();
+        breadcrumb.classList.remove("editing");
         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;
+
+        const normalized = absPath.replaceAll("\\", "/").replace(/\/+$/, "") || "/";
+        const parts = normalized.split("/").filter(Boolean);
+        let accumulated = "";
+
+        if (normalized.startsWith("/")) {
+          const isCurrent = parts.length === 0;
+          appendBreadcrumbPart("/", "/", isCurrent, !isCurrent || currentHasChildDirs);
+        } else if (parts.length > 0) {
+          accumulated = parts.shift();
+          const isCurrent = parts.length === 0;
+          appendBreadcrumbPart(accumulated, `${accumulated}/`, isCurrent, !isCurrent || currentHasChildDirs);
+        }
+
+        parts.forEach((part, index) => {
+          accumulated = normalized.startsWith("/")
+            ? `${accumulated}/${part}`
+            : `${accumulated}/${part}`;
+          const targetPath = normalized.startsWith("/") ? accumulated || "/" : accumulated;
+          const isCurrent = index === parts.length - 1;
+          appendBreadcrumbPart(part, targetPath, isCurrent, !isCurrent || currentHasChildDirs);
+        });
+
+        requestAnimationFrame(() => { breadcrumb.scrollLeft = breadcrumb.scrollWidth; });
+      }
+
+      function enterAddressMode(value = currentPath) {
+        closeBreadcrumbMenu();
+        breadcrumb.classList.add("editing");
+        breadcrumb.innerHTML = "";
+
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = "dp-address-input";
+        input.value = value || "";
+        input.placeholder = t("sib.dir.inputPlaceholder", "Type or select a directory path");
+        input.setAttribute("aria-label", input.placeholder);
+        input.spellcheck = false;
+        input.autocomplete = "off";
+        input.setAttribute("autocapitalize", "off");
+        breadcrumb.appendChild(input);
+
+        let submitting = false;
+        const cancel = () => {
+          if (!breadcrumb.contains(input)) return;
+          refreshBreadcrumb(currentPath);
+          if (listContainer.querySelector(".dp-error")) navigateTo(currentPath, true, false);
+        };
+        IME.bindEnter(input, async () => {
+          const path = input.value.trim();
+          if (!path || submitting) return;
+          submitting = true;
+          input.disabled = true;
+          const navigated = await navigateTo(path, true, true, true);
+          if (!navigated) {
+            enterAddressMode(path);
+            const retryInput = breadcrumb.querySelector(".dp-address-input");
+            retryInput?.classList.add("invalid");
           }
-          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);
+        });
+        input.addEventListener("keydown", (e) => {
+          e.stopPropagation();
+          if (e.key === "Escape") {
+            e.preventDefault();
+            cancel();
           }
-          breadcrumb.appendChild(seg);
         });
-        // Always scroll to show the rightmost (current) segment
-        requestAnimationFrame(() => { breadcrumb.scrollLeft = breadcrumb.scrollWidth; });
+        input.addEventListener("click", (e) => e.stopPropagation());
+        input.addEventListener("blur", () => {
+          if (!submitting) cancel();
+        });
+
+        requestAnimationFrame(() => {
+          input.focus();
+          input.select();
+        });
       }
 
-      // 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"));
+      breadcrumb.addEventListener("click", (e) => {
+        if (e.target === breadcrumb) enterAddressMode();
+      });
 
-        // Push to history
-        if (pushHistory) {
-          // Trim forward history
-          history.splice(historyIndex + 1);
-          history.push(dirPath);
-          historyIndex = history.length - 1;
-          refreshNavBtns();
+      function comparablePath(path) {
+        let normalized = (path || "").trim().replaceAll("\\", "/");
+        if (normalized === "~" || normalized.startsWith("~/")) {
+          normalized = `${homeDir}${normalized.slice(1)}`;
         }
+        return normalized.replace(/\/+$/, "") || "/";
+      }
 
-        selectedPath = dirPath;
-        refreshBreadcrumb(dirPath);
+      // Core navigation function
+      async function navigateTo(dirPath, absolute = true, pushHistory = true, requireExact = false) {
+        closeBreadcrumbMenu();
+        if (pushHistory && historyIndex >= 0
+          && comparablePath(currentPath) === comparablePath(dirPath)) {
+          return true;
+        }
+
+        favoriteBtn.disabled = true;
+        listContainer.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
+        listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
 
         const useAbsolute = absolute || sessionLess || dirPath.startsWith("/");
         let relPath = dirPath;
@@ -5694,16 +5712,37 @@ const Sessions = (() => {
         }
 
         try {
-          const dirs = await fetchDirs(relPath, useAbsolute);
-          // After first relative load, rootDir is now known — refresh breadcrumb + selectedPath
+          const { dirs, resolvedPath, exact } = await fetchDirs(relPath, useAbsolute);
+          const exactMatch = exact === undefined
+            ? comparablePath(resolvedPath) === comparablePath(dirPath)
+            : exact;
+          if (requireExact && !exactMatch) {
+            throw new Error("Directory not found");
+          }
+
+          let effectivePath = useAbsolute && resolvedPath ? resolvedPath : dirPath;
+          // After first relative load, rootDir is now known.
           if (rootDir && dirPath === "") {
-            const effectivePath = currentDir && (currentDir === rootDir || currentDir.startsWith(rootDir + "/"))
+            effectivePath = currentDir && (currentDir === rootDir || currentDir.startsWith(rootDir + "/"))
               ? currentDir
               : rootDir;
-            selectedPath = effectivePath;
-            refreshBreadcrumb(effectivePath);
-            history[historyIndex] = effectivePath;
           }
+
+          const isNewHistoryEntry = historyIndex < 0
+            || comparablePath(history[historyIndex]) !== comparablePath(effectivePath);
+          if (pushHistory && isNewHistoryEntry) {
+            history.splice(historyIndex + 1);
+            history.push(effectivePath);
+            historyIndex = history.length - 1;
+          }
+          refreshNavBtns();
+
+          currentPath = effectivePath;
+          selectedPath = effectivePath;
+          currentHasChildDirs = dirs.length > 0;
+          currentPathLoaded = true;
+          refreshBreadcrumb(effectivePath);
+          refreshFavoriteButton();
           listContainer.innerHTML = "";
           if (dirs.length === 0) {
             listContainer.innerHTML = `<div class="dp-empty">${t("sib.dir.empty", "空目录")}</div>`;
@@ -5712,37 +5751,63 @@ const Sessions = (() => {
             dirs.forEach(d => frag.appendChild(buildDirNode(d, 0)));
             listContainer.appendChild(frag);
           }
+          return true;
         } catch (err) {
           console.error("dir picker load failed:", err);
+          refreshFavoriteButton();
           listContainer.innerHTML = `<div class="dp-error">${t("sib.dir.loadError", "加载失败")}</div>`;
+          return false;
         }
       }
 
       // Back / Forward
-      backBtn.addEventListener("click", () => {
+      backBtn.addEventListener("click", async () => {
         if (historyIndex <= 0) return;
-        historyIndex--;
-        refreshNavBtns();
-        navigateTo(history[historyIndex], true, false);
+        const targetIndex = historyIndex - 1;
+        if (await navigateTo(history[targetIndex], true, false)) {
+          historyIndex = targetIndex;
+          refreshNavBtns();
+        }
       });
-      fwdBtn.addEventListener("click", () => {
+      fwdBtn.addEventListener("click", async () => {
         if (historyIndex >= history.length - 1) return;
-        historyIndex++;
-        refreshNavBtns();
-        navigateTo(history[historyIndex], true, false);
+        const targetIndex = historyIndex + 1;
+        if (await navigateTo(history[targetIndex], true, false)) {
+          historyIndex = targetIndex;
+          refreshNavBtns();
+        }
+      });
+      refreshBtn.addEventListener("click", async () => {
+        refreshBtn.disabled = true;
+        try {
+          await navigateTo(currentPath || currentDir, true, false);
+        } finally {
+          refreshBtn.disabled = false;
+        }
+      });
+      favoriteBtn.addEventListener("click", () => {
+        const path = normalizeFavoritePath(currentPath);
+        if (directoryFavorites.includes(path)) {
+          directoryFavorites = directoryFavorites.filter(favorite => favorite !== path);
+        } else {
+          directoryFavorites.push(path);
+        }
+        saveDirectoryFavorites(directoryFavorites);
+        renderSidebar();
+        refreshFavoriteButton();
       });
 
       // Hidden files toggle
       hiddenCheckbox.addEventListener("change", () => {
         showHidden = hiddenCheckbox.checked;
-        navigateTo(selectedPath || currentDir, true);
+        navigateTo(currentPath || currentDir, true, false);
       });
 
       // New folder — inserts an editable placeholder row at the top of the list
       newFolderBtn.addEventListener("click", () => beginCreateFolder());
 
       function beginCreateFolder() {
-        const parentDir = (selectedPath || "").trim();
+        const parentDir = (currentPath || "").trim();
         if (!parentDir.startsWith("/")) {
           alert(t("sib.dir.mkdirError", "Failed to create folder: {{msg}}").replace("{{msg}}", "invalid parent path"));
           return;
@@ -5799,7 +5864,8 @@ const Sessions = (() => {
               listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
               realNode._dpRow.classList.add("selected");
               selectedPath = data.path;
-              refreshBreadcrumb(data.path);
+              currentHasChildDirs = true;
+              refreshBreadcrumb(currentPath);
             } catch (err) {
               alert(t("sib.dir.mkdirError", "Failed to create folder: {{msg}}").replace("{{msg}}", err.message || String(err)));
               placeholder.remove();
@@ -5848,26 +5914,29 @@ const Sessions = (() => {
         const startDir = currentDir || "/";
         navigateTo(startDir, true);
       } else {
-        // 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("/"));
-            }
-          }, 100);
-        }
+        // Load the relative root first so rootDir is known, then navigate to a
+        // deeper current directory without racing two initial requests.
+        navigateTo("", false).then((loaded) => {
+          if (loaded && currentDir && currentDir !== rootDir) {
+            navigateTo(currentDir, currentDir.startsWith("/"));
+          }
+        });
       }
 
       overlay.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") cancelButton.click();
+        if (e.key !== "Escape") return;
+        if (breadcrumbMenu) {
+          e.preventDefault();
+          closeBreadcrumbMenu();
+          return;
+        }
+        cancelButton.click();
       });
       overlay.addEventListener("click", (e) => {
+        if (breadcrumbMenu && !breadcrumbMenu.contains(e.target)) closeBreadcrumbMenu();
         if (e.target === overlay) cancelButton.click();
       });
+      breadcrumb.addEventListener("scroll", closeBreadcrumbMenu);
     });
   }