openclacky 1.5.13 → 1.5.15

data/lib/clacky/web/sessions.js

@@ -17,10 +17,11 @@
 
 const Sessions = (() => {
   const _sessions          = [];  // [{ id, name, status, total_tasks, total_cost }]
-  const _historyState      = {};  // { [session_id]: { hasMore, oldestCreatedAt, loading, loaded } }
+  const _historyState      = {};  // Per-session history window, cursors and in-flight request.
   const _renderedCreatedAt = {};  // { [session_id]: Set<number> } — dedup by created_at
   const _drafts            = new Map();  // { [session_id]: composer textarea draft }
   const _attachmentDrafts  = new Map();  // { [session_id]: { images: [...], files: [...] } }
+  const _quoteDrafts       = new Map();  // { [session_id]: staged quote cards (quote-select.js) }
   let   _activeId          = null;
   let   _hasMore           = false;   // unified pagination: are there older sessions to load?
   let   _loadingMore       = false;
@@ -37,6 +38,10 @@ const Sessions = (() => {
   // `findOrFetch`. Excluded from sidebar render and from the loadMore cursor
   // so the pagination of `_sessions` stays correct.
   const _extraSessions     = [];
+  // Unknown session_update rows can affect folded-group counts before their
+  // corresponding creation update arrives. Track those adjustments separately
+  // so promoting a cached row into `_sessions` stays idempotent.
+  const _countedExtraIds   = new Set();
   // Sessions that finished while the user was looking elsewhere. Holds a
   // transient "done" dot until the session is opened or DONE_DOT_TTL elapses,
   // so a completed background task is noticeable without a permanent marker.
@@ -347,11 +352,8 @@ const Sessions = (() => {
     // Clear the pane and dedup state; history will be re-fetched from API.
     RenderTarget.outer().innerHTML = "";
     delete _renderedCreatedAt[id];
-    if (_historyState[id]) {
-      _historyState[id].oldestCreatedAt = null;
-      _historyState[id].hasMore         = true;
-      _historyState[id].loading         = false;  // reset so next fetch is not skipped
-    }
+    _historyState[id]?.controller?.abort();
+    delete _historyState[id];
     // Reset scroll tracking when switching sessions
     _userScrolledUp = false;
   }
@@ -412,6 +414,12 @@ const Sessions = (() => {
   function _showNewMessageBanner() {
     const banner = $("new-message-banner");
     if (!banner) return;
+    const label = banner.querySelector("span");
+    if (label) {
+      const key = Sessions.isHistoricalWindow() ? "chat.nav.latest" : "chat.newMessageHint";
+      label.dataset.i18n = key;
+      label.textContent = I18n.t(key);
+    }
     banner.style.display = "block";
   }
 
@@ -548,6 +556,10 @@ const Sessions = (() => {
     
     // Click to scroll to bottom
     banner.addEventListener("click", () => {
+      if (Sessions.isHistoricalWindow()) {
+        Sessions.loadLatestHistory();
+        return;
+      }
       messages.scrollTop = messages.scrollHeight;
       _userScrolledUp = false;
       _hideNewMessageBanner();
@@ -569,7 +581,7 @@ const Sessions = (() => {
     // so a content update never moves us "away from bottom" and never trips a
     // false positive here. The 150px threshold in _isAtBottom is extra slack.
     messages.addEventListener("scroll", () => {
-      if (_isAtBottom(messages)) {
+      if (_isAtBottom(messages) && !Sessions.isHistoricalWindow()) {
         _userScrolledUp = false;
         _hideNewMessageBanner();
       } else {
@@ -1112,8 +1124,18 @@ const Sessions = (() => {
     if (submit) submit.onclick = trySubmit;
   }
 
-  // Render a mention chip (file/directory/session) as a bubble badge.
+  // Render a reference chip (file/directory/session/quote) as a bubble badge.
+  // Quote references carry a verbatim excerpt instead of a name: the badge shows
+  // it truncated to one line (.msg-quote-badge), the tooltip carries the whole
+  // thing plus the provenance line.
   function _renderMentionBadge(chip) {
+    if (chip.type === "quote") {
+      const title = chip.label ? chip.label + "\n" + chip.text : chip.text;
+      return `<span class="msg-mention-badge msg-quote-badge" title="${escapeHtml(title)}">` +
+        `<span class="msg-mention-badge-icon">${QuoteSelect.icon(13)}</span>` +
+        `<span class="msg-mention-badge-name">${escapeHtml(chip.text)}</span>` +
+        `</span>`;
+    }
     const path = chip.type === "session"
       ? MentionAC.icons.message
       : (chip.type === "directory" ? MentionAC.icons.folder : MentionAC.icons.file);
@@ -1123,12 +1145,37 @@ const Sessions = (() => {
       `</span>`;
   }
 
-  function _sendMessage() {
+  function _closeInputBehaviorMenu(restoreFocus = false) {
+    const menu = $("input-behavior-menu");
+    const toggle = $("input-behavior-toggle");
+    if (menu) menu.hidden = true;
+    toggle?.setAttribute("aria-expanded", "false");
+    if (restoreFocus) toggle?.focus();
+  }
+
+  function _updateInputBehavior(status = Sessions.find(Sessions.activeId)?.status) {
+    const running = status === "running";
+    const control = $("input-behavior-control");
+    const mode = $("input-behavior")?.value || "queue";
+    if (control) control.hidden = !running;
+    if (!running) _closeInputBehaviorMenu();
+    document.querySelectorAll("[data-input-behavior]").forEach(button => {
+      button.setAttribute("aria-checked", String(button.dataset.inputBehavior === mode));
+    });
+    const label = I18n.t(`chat.input.${mode}Mode`);
+    $("input-behavior-toggle")?.setAttribute("aria-label", I18n.t("chat.input.behaviorTitle") + ": " + label);
+  }
+
+  async function _sendMessage() {
     if (_sending) return;
     const input   = $("user-input");
-    const content = Composer.text(input).trim();
+    const typed   = Composer.text(input).trim();
+    const quotes  = (typeof QuoteSelect !== "undefined") ? QuoteSelect.toReferences() : [];
     const mentionChips = Composer.chips(input);
-    if (!content && mentionChips.length === 0 && _pendingImages.length === 0 && _pendingFiles.length === 0) return;
+    // Quotes travel as references, not as text in the body — the chip the user
+    // staged is a UI affordance, and the sent bubble re-renders it as a badge.
+    const content = typed;
+    if (!content && quotes.length === 0 && mentionChips.length === 0 && _pendingImages.length === 0 && _pendingFiles.length === 0) return;
     if (!Sessions.activeId) return;
 
     if (!WS.ready) {
@@ -1147,10 +1194,16 @@ const Sessions = (() => {
     }
 
     _sending = true;
+    if (Sessions.isHistoricalWindow()) {
+      const id = Sessions.activeId;
+      const loaded = await Sessions.loadLatestHistory();
+      if (!loaded || Sessions.activeId !== id) { _sending = false; return; }
+    }
 
     let bubbleHtml = content ? SkillAC.renderUserMessageHtml(content) : "";
-    if (mentionChips.length > 0) {
-      const chipBadges = mentionChips.map(_renderMentionBadge).join(" ");
+    const badgeChips = quotes.concat(mentionChips);
+    if (badgeChips.length > 0) {
+      const chipBadges = badgeChips.map(_renderMentionBadge).join(" ");
       bubbleHtml = chipBadges + (bubbleHtml ? "<br>" + bubbleHtml : "");
     }
     if (_pendingImages.length > 0) {
@@ -1173,10 +1226,12 @@ const Sessions = (() => {
       }).join(" ");
       bubbleHtml = badges + (bubbleHtml ? "<br>" + bubbleHtml : "");
     }
-    if (typeof window._closeAllPhases === "function") {
-      window._closeAllPhases("incomplete");
+    const inputBehavior = $("input-behavior")?.value || "queue";
+    const queuing = inputBehavior === "steer" || inputBehavior === "queue";
+    if (!queuing) {
+      if (typeof window._closeAllPhases === "function") window._closeAllPhases("incomplete");
+      Sessions.appendMsg("user", bubbleHtml, { time: new Date() });
     }
-    Sessions.appendMsg("user", bubbleHtml, { time: new Date() });
 
     // Merge images and files into unified files array for WS payload.
     _pendingImages.sort((a, b) => a.seq - b.seq);
@@ -1196,12 +1251,12 @@ const Sessions = (() => {
         .filter(c => c.type === "file" || c.type === "directory")
         .map(c => ({ name: c.name, path: c.path, reference: true }))
     ];
-    const references = mentionChips.map(c => {
+    const references = quotes.concat(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;
@@ -1219,8 +1274,10 @@ const Sessions = (() => {
     });
 
     Composer.clear(input);
+    if (typeof QuoteSelect !== "undefined") QuoteSelect.clear();
     _drafts.delete(Sessions.activeId);
     _attachmentDrafts.delete(Sessions.activeId);
+    _quoteDrafts.delete(Sessions.activeId);
     setTimeout(() => { _sending = false; }, 300);
   }
 
@@ -1245,6 +1302,40 @@ const Sessions = (() => {
     Composer.init($("user-input"));
 
     // Send & attach buttons
+    const behaviorMenu = $("input-behavior-menu");
+    const behaviorToggle = $("input-behavior-toggle");
+    behaviorToggle?.addEventListener("click", () => {
+      const open = behaviorMenu.hidden;
+      behaviorMenu.hidden = !open;
+      behaviorToggle.setAttribute("aria-expanded", String(open));
+      if (open) behaviorMenu.querySelector('[aria-checked="true"]')?.focus();
+    });
+    behaviorMenu?.addEventListener("click", event => {
+      const option = event.target.closest("[data-input-behavior]");
+      if (!option || !WS.ready) return;
+      $("input-behavior").value = option.dataset.inputBehavior;
+      WS.send({ type: "input_behavior", value: option.dataset.inputBehavior });
+      _updateInputBehavior();
+      _closeInputBehaviorMenu(true);
+    });
+    behaviorMenu?.addEventListener("keydown", event => {
+      const options = [...behaviorMenu.querySelectorAll("[data-input-behavior]")];
+      const index = options.indexOf(document.activeElement);
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        options[(index + (event.key === "ArrowDown" ? 1 : options.length - 1)) % options.length]?.focus();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        _closeInputBehaviorMenu(true);
+      } else if (event.key === "Tab") {
+        _closeInputBehaviorMenu();
+      }
+    });
+    document.addEventListener("pointerdown", event => {
+      if (!event.target.closest("#input-behavior-control")) _closeInputBehaviorMenu();
+    });
+    _updateInputBehavior();
     document.getElementById("btn-send").addEventListener("click", _sendMessage);
     document.getElementById("btn-attach")
       .addEventListener("click", () => document.getElementById("image-file-input").click());
@@ -1407,6 +1498,8 @@ const Sessions = (() => {
       const messages = e.currentTarget;
       if (messages.scrollTop < 80 && Sessions.activeId && Sessions.hasMoreHistory(Sessions.activeId)) {
         Sessions.loadMoreHistory(Sessions.activeId);
+      } else if (_isAtBottom(messages) && Sessions.isHistoricalWindow()) {
+        Sessions.loadNewerHistory();
       }
     });
 
@@ -1609,6 +1702,22 @@ const Sessions = (() => {
     return result;
   }
 
+  function _renderWebSearchResults(payload) {
+    const escape = (value) => String(value == null ? "" : value)
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;");
+    if (payload.error) return `<div class="search-error">${escape(payload.error)}</div>`;
+    const meta = [payload.count != null ? `${payload.count} results` : "", payload.provider ? `via ${payload.provider}` : ""]
+      .filter(Boolean).join(" · ");
+    const items = Array.isArray(payload.results) ? payload.results : [];
+    return `<div class="search-results">${meta ? `<div class="search-results-meta">${escape(meta)}</div>` : ""}` +
+      items.map((item, index) => {
+        const title = item.title || item.url || `Result ${index + 1}`;
+        const url = item.url || "";
+        const snippet = item.snippet ? `<div class="search-result-snippet">${escape(item.snippet)}</div>` : "";
+        return `<article class="search-result"><span class="search-result-index">${index + 1}</span><div><a href="${escape(url)}" target="_blank" rel="noopener noreferrer">${escape(title)}</a><div class="search-result-url">${escape(url)}</div>${snippet}</div></article>`;
+      }).join("") + "</div>";
+  }
+
   // Produce a short one-line summary of tool arguments for the compact view.
   function _summariseArgs(toolName, args) {
     if (!args || typeof args !== "object") return String(args || "");
@@ -1671,7 +1780,7 @@ const Sessions = (() => {
   }
 
   // Mark a specific tool-item element as done (update status + render result).
-  function _completeToolItem(last, result, { collapsed = false } = {}) {
+  function _completeToolItem(last, result, { collapsed = false, ui = null } = {}) {
     if (!last) return;
     const status = last.querySelector(".tool-item-status");
     if (status) {
@@ -1687,8 +1796,11 @@ const Sessions = (() => {
     const stdout = last.querySelector(".tool-item-stdout");
     if (stdout) {
       const existing = stdout.textContent.trim();
+      const isWebSearch = ui && ui.type === "web_search";
       const resultStr = (result == null) ? "" : String(result).trim();
-      if (!existing && resultStr) {
+      if (!existing && isWebSearch) {
+        stdout.innerHTML = _renderWebSearchResults(ui);
+      } else if (!existing && resultStr) {
         stdout.innerHTML = _ansiToHtml(resultStr);
       }
       const hasContent = !!stdout.textContent.trim();
@@ -1804,6 +1916,7 @@ const Sessions = (() => {
         bubbleHtml += SkillAC.renderUserMessageHtml(ev.content || "", ev.skill_command, ev.skill_command_display);
         el.innerHTML = bubbleHtml;
         if (ev.created_at) el.dataset.createdAt = ev.created_at;
+        if (ev.round_id) el.dataset.roundId = ev.round_id;
         // Messages archived into a compressed chunk can't be edited (the backend
         // truncate keys off the active in-memory history). Flag them so the edit
         // affordance stays hidden.
@@ -1852,14 +1965,17 @@ const Sessions = (() => {
           }
           const stdout = historyCtx.lastItem.querySelector(".tool-item-stdout");
           if (stdout) {
+            const ui = ev.ui;
+            const isWebSearch = ui && ui.type === "web_search";
             const resultStr = (ev.result == null) ? "" : String(ev.result).trim();
-            if (resultStr && !stdout.textContent.trim()) {
+            if (isWebSearch) {
+              stdout.innerHTML = _renderWebSearchResults(ui);
+              const header = historyCtx.lastItem.querySelector(".tool-item-header");
+              if (header && !header.classList.contains("tool-item-expandable")) header.classList.add("tool-item-expandable");
+            } else if (resultStr && !stdout.textContent.trim()) {
               stdout.innerHTML = _ansiToHtml(resultStr);
-              // Collapsed by default in history; click header to expand
               const header = historyCtx.lastItem.querySelector(".tool-item-header");
-              if (header && !header.classList.contains("tool-item-expandable")) {
-                header.classList.add("tool-item-expandable");
-              }
+              if (header && !header.classList.contains("tool-item-expandable")) header.classList.add("tool-item-expandable");
             } else if (!resultStr && !stdout.textContent.trim()) {
               stdout.style.display = "none";
             }
@@ -1987,40 +2103,56 @@ const Sessions = (() => {
 
   // Fetch one page of history and insert into #messages or cache.
   // before=null means most recent page; prepend=true for scroll-up load.
-  async function _fetchHistory(id, before = null, prepend = false) {
-    const state = _historyState[id] || (_historyState[id] = { hasMore: true, oldestCreatedAt: null, loading: false });
-    if (state.loading) return;
+  async function _fetchHistory(id, before = null, prepend = false, options = {}) {
+    const state = _historyState[id] || (_historyState[id] = { hasMore: true, loading: false });
+    if (state.loading && !options.replace) return false;
+    state.controller?.abort();
+    const controller = new AbortController();
+    state.controller = controller;
+    const wasHistorical = !!state.hasAfter;
+    const liveRevision = state.liveRevision || 0;
+    if (options.around) state.hasAfter = true;
+    if (options.replace) state.replacing = true;
     state.loading = true;
+    let succeeded = false;
 
     try {
-      const params = new URLSearchParams({ limit: 30 });
-      if (before) params.set("before", before);
+      const params = new URLSearchParams({ limit: 30, window: 1 });
+      if (before) params.set("before_id", before);
+      if (options.around) params.set("around", options.around);
+      if (options.after) params.set("after_id", options.after);
 
-      const res = await fetch(`/api/sessions/${id}/messages?${params}`);
+      const res = await fetch(`/api/sessions/${id}/messages?${params}`, { signal: controller.signal });
+      if (id !== _activeId || _historyState[id] !== state || state.controller !== controller) return false;
       if (!res.ok) {
+        if (res.status === 409) window.ChatNavigator?.refresh();
         if (id === _activeId) {
           let reason = "";
           try { const d = await res.json(); reason = d.error || ""; } catch {}
           const suffix = reason ? `: ${reason}` : "";
           Sessions.appendMsg("info", `${I18n.t("chat.history_load_failed")} (${res.status}${suffix})`);
         }
-        return;
+        return false;
       }
       const data = await res.json();
+      if (id !== _activeId || _historyState[id] !== state || state.controller !== controller) return false;
 
-      state.hasMore = !!data.has_more;
+      if (!options.after) {
+        state.hasMore = !!data.has_more;
+        state.beforeCursor = data.before_cursor;
+      }
+      if (!prepend) {
+        state.hasAfter = !!data.has_after;
+        state.afterCursor = data.after_cursor;
+      }
+      if (options.replace) {
+        window._closeAllPhases?.("incomplete");
+        Sessions.collapseToolGroup();
+        RenderTarget.outer().replaceChildren();
+        delete _renderedCreatedAt[id];
+      }
 
       const events = data.events || [];
-      if (events.length === 0) return;
-
-      // Track oldest created_at for next cursor (scroll-up pagination)
-      events.forEach(ev => {
-        if (ev.type === "history_user_message" && ev.created_at) {
-          if (state.oldestCreatedAt === null || ev.created_at < state.oldestCreatedAt) {
-            state.oldestCreatedAt = ev.created_at;
-          }
-        }
-      });
 
       // Pre-scan: mark each request_feedback as answered.
       // A feedback card is disabled as soon as any subsequent history_user_message appears
@@ -2028,7 +2160,7 @@ const Sessions = (() => {
       {
         let lastFeedbackIdx = -1;
         events.forEach((ev, i) => {
-          if (ev.type === "request_feedback") { ev._answered = false; lastFeedbackIdx = i; }
+          if (ev.type === "request_feedback") { ev._answered = !!data.has_after; lastFeedbackIdx = i; }
           if (ev.type === "history_user_message" && lastFeedbackIdx >= 0 && i > lastFeedbackIdx) {
             events[lastFeedbackIdx]._answered = true;
             lastFeedbackIdx = -1;
@@ -2047,8 +2179,8 @@ const Sessions = (() => {
 
       events.forEach(ev => {
         if (ev.type === "history_user_message") {
-          currentCreatedAt = ev.created_at;
-          skipRound        = currentCreatedAt && dedup.has(currentCreatedAt);
+          currentCreatedAt = ev.round_id || ev.created_at;
+          skipRound = currentCreatedAt && (dedup.has(currentCreatedAt) || (ev.editable !== false && dedup.has(ev.created_at)));
           if (!skipRound && currentCreatedAt) dedup.add(currentCreatedAt);
         }
         if (!skipRound) _renderHistoryEvent(ev, frag, historyCtx);
@@ -2075,10 +2207,16 @@ const Sessions = (() => {
           } else {
             messages.appendChild(frag);
           }
-          messages.scrollTop = messages.scrollHeight;
+          if (options.around) {
+            messages.scrollTop = 0;
+            _userScrolledUp = true;
+          } else if (!options.after) {
+            messages.scrollTop = messages.scrollHeight;
+            _userScrolledUp = false;
+          }
           // Flush any tool_stdout lines that arrived via WS before this history
           // fetch completed (race condition on session switch).
-          if (!prepend) _flushPendingStdout();
+          if (!prepend && !state.hasAfter) _flushPendingStdout();
         }
 
         // If no more history remains, insert a "beginning of conversation" marker at the top.
@@ -2094,7 +2232,7 @@ const Sessions = (() => {
 
         // Restore transient UI state based on session status after initial load
         // (not prepend, which is scroll-up pagination — no need to re-restore then)
-        if (!prepend) {
+        if (!prepend && !state.hasAfter) {
           const session = _sessions.find(s => s.id === id);
           if (session) {
             if (session.status === "running") {
@@ -2116,13 +2254,35 @@ const Sessions = (() => {
             }
           }
         }
+        if (state.hasAfter) _showNewMessageBanner();
+        else _hideNewMessageBanner();
+        window.ChatNavigator?.syncMessages();
       }
+      succeeded = true;
+    } catch (error) {
+      if (error.name !== "AbortError" && id === _activeId && state.controller === controller) {
+        Sessions.appendMsg("info", escapeHtml(I18n.t("chat.history_load_failed")));
+      }
+      return false;
     } finally {
-      state.loading = false;
+      if (state.controller === controller) {
+        state.loading = false;
+        state.replacing = false;
+        if (!succeeded) state.hasAfter = wasHistorical;
+      }
       // After loading finishes, re-evaluate the empty-state hint in case
       // the session is genuinely empty (no events + no existing DOM content).
-      if (id === _activeId) _updateEmptyHint();
+      if (id === _activeId) {
+        _updateEmptyHint();
+        _refreshEditButtons(RenderTarget.outer());
+      }
     }
+    // A live message may have arrived after the server took its snapshot while
+    // this detached window was loading. Reconcile before resuming live output.
+    if (succeeded && !state.hasAfter && (state.liveRevision || 0) !== liveRevision && id === _activeId) {
+      return _fetchHistory(id, null, false, { replace: true });
+    }
+    return succeeded;
   }
 
   // ── Private helpers ───────────────────────────────────────────────────
@@ -2238,7 +2398,7 @@ const Sessions = (() => {
   }
 
   function _refreshEditButtons(container, status) {
-    const running = (status || Sessions.find(Sessions.activeId)?.status) === "running";
+    const running = (status || Sessions.find(Sessions.activeId)?.status) === "running" || Sessions.isHistoricalWindow();
     const btns = Array.from(container.querySelectorAll(".msg-edit-btn"));
     btns.forEach((btn, i) => {
       btn.style.display = !running && i === btns.length - 1 ? "" : "none";
@@ -2256,6 +2416,7 @@ const Sessions = (() => {
   }
 
   function _enterEditMode(el) {
+    if (Sessions.isHistoricalWindow()) return;
     if (_activeSessionIsRunning() || el.classList.contains("editing")) return;
     el.classList.add("editing");
 
@@ -2330,6 +2491,7 @@ const Sessions = (() => {
   }
 
   function _submitEdit(el, newContent) {
+    if (Sessions.isHistoricalWindow()) return;
     if (!newContent) return;
     if (!Sessions.activeId) return;
     if (_activeSessionIsRunning()) {
@@ -2785,6 +2947,40 @@ const Sessions = (() => {
 
 
 
+  // Compact a working directory for the status bar: keep a short leading
+  // anchor (up to two segments, e.g. "/Users/leo") plus as many trailing
+  // segments as fit, ellipsising the middle so the current directory name
+  // stays visible. The full path lives in title/dataset, not here.
+  function _compactWorkingDir(p, maxLen = 40) {
+    if (!p) return p;
+    if (p.length <= maxLen) return p;
+
+    const abs = /^[\\/]/.test(p);
+    const segs = p.split(/[\\/]+/).filter((s) => s !== "");
+    if (!segs.length) return p;
+
+    // The final segment (current directory name) must always stay intact;
+    // shrink the leading anchor first when a longer tail won't fit.
+    for (let headCount = Math.min(2, segs.length - 1); headCount >= 0; headCount--) {
+      const headStr = headCount > 0
+        ? (abs ? "/" : "") + segs.slice(0, headCount).join("/")
+        : "";
+      let budget = maxLen - headStr.length - 3; // reserve "/…/"
+      const tail = [];
+      for (let i = segs.length - 1; i >= headCount; i--) {
+        const need = segs[i].length + (tail.length ? 1 : 0);
+        if (need > budget) break;
+        tail.unshift(segs[i]);
+        budget -= need;
+      }
+      if (tail.length) {
+        return (headStr ? headStr + "/…/" : "…/") + tail.join("/");
+      }
+    }
+    // Final segment alone exceeds maxLen — cut it (practically never).
+    return "…/" + segs[segs.length - 1].slice(-Math.max(1, maxLen - 2));
+  }
+
   // ── Public API ─────────────────────────────────────────────────────────
   return {
     get all()        { return _sessions; },
@@ -2850,6 +3046,10 @@ const Sessions = (() => {
       _initComposer();
       _initSearch();
       _initMessageHistory();
+      // Quote-on-selection: floating quote button over message selections.
+      // quote-select.js is loaded after sessions.js; it's available at init
+      // time because app.js (which calls Sessions.init()) loads last.
+      if (typeof QuoteSelect !== "undefined") QuoteSelect.init();
       _ensureAgentsLoaded().then(() => Sessions.renderList());
       // Re-render session list (badges/labels) when the user switches language
       document.addEventListener("langchange", () => Sessions.renderList());
@@ -2866,6 +3066,21 @@ const Sessions = (() => {
       // Local deployments (localhost / 127.0.0.1 / ::1): open the file with the
       // OS default handler.  Remote deployments: download the file.
       document.addEventListener("click", async (e) => {
+        // Localhost dev-server URLs open in the preview panel instead of a new
+        // tab (local deployments only — the proxy can't reach a remote user's
+        // localhost).
+        const localLink = e.target.closest("a[href]");
+        if (localLink) {
+          const href = localLink.getAttribute("href") || "";
+          if (/^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?([/?#]|$)/i.test(href) &&
+              ["localhost", "127.0.0.1", "::1"].includes(window.location.hostname) &&
+              window.Clacky && Clacky.Preview) {
+            e.preventDefault();
+            Clacky.Preview.open(href);
+            return;
+          }
+        }
+
         const link = e.target.closest("a[href^='file://']");
         if (!link) return;
         e.preventDefault();
@@ -2878,6 +3093,12 @@ const Sessions = (() => {
 
         const hostname = window.location.hostname;
         const isLocal = ["localhost", "127.0.0.1", "::1"].includes(hostname);
+
+        // Local deployments: open the file in the Files tab of the aside
+        // panel (inline preview; binary formats show an "open with app"
+        // fallback page). Fall back to the OS default handler when the
+        // viewer is unavailable.  Remote deployments: download the file.
+        if (isLocal && window.Clacky && Clacky.WorkspaceView && Clacky.WorkspaceView.openFile(filePath)) return;
         const action = isLocal ? "open" : "download";
 
         try {
@@ -2915,12 +3136,44 @@ const Sessions = (() => {
       _applyGroupStats(groups);
     },
 
-    /** Insert a newly created session into the local list. */
+    /** Insert or refresh a newly created session in the local list. */
     add(session) {
-      if (!_sessions.find(s => s.id === session.id)) {
-        _sessions.push(session);
-        const g = _groupOf(session);
-        if (g) g.count++;
+      if (!session || !session.id) return;
+
+      const existing  = _sessions.find(s => s.id === session.id);
+      const extraIdx  = _extraSessions.findIndex(s => s.id === session.id);
+      const extra     = extraIdx === -1 ? null : _extraSessions[extraIdx];
+      const extraWasCounted = _countedExtraIds.delete(session.id);
+
+      if (existing) {
+        const previousGroup = _groupOf(existing);
+        if (extra) {
+          if (extraWasCounted) {
+            const extraGroup = _groupOf(extra);
+            if (extraGroup) extraGroup.count = Math.max(0, extraGroup.count - 1);
+          }
+          Object.assign(existing, extra);
+          _extraSessions.splice(extraIdx, 1);
+        }
+        Object.assign(existing, session);
+
+        const nextGroup = _groupOf(existing);
+        if (previousGroup !== nextGroup) {
+          if (previousGroup) previousGroup.count = Math.max(0, previousGroup.count - 1);
+          if (nextGroup) nextGroup.count++;
+        }
+        return;
+      }
+
+      const inserted = extra ? { ...extra, ...session } : session;
+      const previousGroup = extra && extraWasCounted ? _groupOf(extra) : null;
+      if (extra) _extraSessions.splice(extraIdx, 1);
+      _sessions.push(inserted);
+
+      const nextGroup = _groupOf(inserted);
+      if (previousGroup !== nextGroup) {
+        if (previousGroup) previousGroup.count = Math.max(0, previousGroup.count - 1);
+        if (nextGroup) nextGroup.count++;
       }
     },
 
@@ -2951,8 +3204,8 @@ const Sessions = (() => {
     },
 
     /** Patch a single session's fields (from session_update event).
-     *  If the session is not in the list yet (e.g. just created by another tab),
-     *  prepend it so the sidebar shows it immediately. */
+     *  Unknown sessions stay in the extra cache until an explicit creation
+     *  update promotes them, preserving the paged sidebar boundary. */
     patch(id, fields) {
       const s = _sessions.find(s => s.id === id);
       const extra = _extraSessions.find(e => e.id === id);
@@ -2985,6 +3238,13 @@ const Sessions = (() => {
           isGroup.latestUpdatedAt = t;
         }
       }
+
+      if (!s) {
+        if (wasGroup !== isGroup) {
+          if (isGroup) _countedExtraIds.add(id);
+          else _countedExtraIds.delete(id);
+        }
+      }
     },
 
     /** Flag a session as just-finished so the sidebar shows a transient dot.
@@ -3016,6 +3276,7 @@ const Sessions = (() => {
       // Clean up per-session progress state (timer + DOM + logical state)
       Sessions._deleteProgressState(id);
       _drafts.delete(id);
+      _quoteDrafts.delete(id);
     },
 
     /** Clear project_id from all sessions that belong to a deleted project. */
@@ -3269,7 +3530,8 @@ const Sessions = (() => {
             contentRows.forEach(s => _renderSessionItem(box, s));
           }
         }
-        if (nameRows.length === 0 && contentRows.length === 0) {
+        // Only when the content search never ran — it renders its own empty state.
+        if (!contentLoaded && nameRows.length === 0 && contentRows.length === 0) {
           const empty = document.createElement("div");
           empty.className = "session-empty";
           empty.textContent = I18n.t("sessions.search.contentEmpty");
@@ -3437,6 +3699,7 @@ const Sessions = (() => {
         _pendingFiles.length  = 0;
       }
       _renderAttachmentPreviews();
+      if (typeof QuoteSelect !== "undefined") QuoteSelect.restore(_quoteDrafts.get(id) || []);
       // Reconcile todos against the authoritative server snapshot. WS
       // todo_update is fire-and-forget — a broadcast lost mid-complete
       // (e.g. a WS hiccup while completing the last task) would otherwise
@@ -3459,6 +3722,7 @@ const Sessions = (() => {
         const input = $("user-input");
         if (input) _drafts.set(_activeId, Composer.text(input));
         _attachmentDrafts.set(_activeId, { images: _pendingImages.splice(0), files: _pendingFiles.splice(0) });
+        if (typeof QuoteSelect !== "undefined") _quoteDrafts.set(_activeId, QuoteSelect.list());
         _renderAttachmentPreviews();
         Sessions._detachProgressUI(_activeId);
       }
@@ -3910,7 +4174,10 @@ const Sessions = (() => {
       }
     },
 
+    updateInputBehavior: _updateInputBehavior,
+
     updateStatusBar(status) {
+      _updateInputBehavior(status);
       // chat-header was removed; status text is now shown in the bottom session-info-bar (#sib-status).
       // Here we update controls whose availability follows the active session status.
       const interrupt = $("btn-interrupt");
@@ -3945,8 +4212,12 @@ const Sessions = (() => {
       this._lastSession = s;
       if (Clacky.Workspace) Clacky.Workspace.onSession(s);
       if (!s) {
-        // Hide all spans when no session
-        ["sib-id", "sib-status", "sib-dir", "sib-mode", "sib-model", "sib-reasoning", "sib-tasks", "sib-cost"].forEach(id => {
+        // Hide all spans when no session. Fields that own a static caret (dir,
+        // reasoning) keep their markup and only blank the text node.
+        ["sib-id", "sib-status", "sib-mode", "sib-model", "sib-tasks", "sib-cost"].forEach(id => {
+          const el = $(id); if (el) el.textContent = "";
+        });
+        ["sib-dir-text", "sib-reasoning-text"].forEach(id => {
           const el = $(id); if (el) el.textContent = "";
         });
         const sibIdEl = $("sib-id");
@@ -3987,13 +4258,20 @@ const Sessions = (() => {
         }
       }
 
-      // Working dir — show full path
+      // Working dir — show a compacted path (middle-ellipsised), full path in title.
+      // The caret lives in the markup, so only the inner text node is rewritten.
       const sibDir = $("sib-dir");
-      if (sibDir && s.working_dir) {
-        sibDir.textContent = s.working_dir;
+      const sibDirText = $("sib-dir-text");
+      if (sibDir && sibDirText) {
+        sibDirText.textContent = s.working_dir ? _compactWorkingDir(s.working_dir) : "";
         sibDir.title = `${s.working_dir} (${I18n.t("sib.dir.tooltip")})`;
-        sibDir.dataset.workingDir = s.working_dir;
-        sibDir.dataset.sessionId = s.id;
+        sibDir.hidden = !s.working_dir;
+        if (s.working_dir) {
+          sibDir.dataset.workingDir = s.working_dir;
+          sibDir.dataset.sessionId = s.id;
+        } else {
+          delete sibDir.dataset.workingDir;
+        }
       }
 
       // Permission mode — hide element and its separator if empty
@@ -4017,7 +4295,14 @@ const Sessions = (() => {
         const display = subModel
           ? `${subModel}`
           : (s.model || "");
-        sibModel.textContent = display;
+        // Same vendor badge as the dropdown rows, so the bar reads as the
+        // same object the user just picked from.
+        sibModel.textContent = "";
+        if (display) {
+          sibModel.appendChild(ModelPicker.vendorBadge(display));
+          sibModel.appendChild(document.createTextNode(display));
+          sibModel.appendChild(ModelPicker.caret());
+        }
         sibModel.dataset.sessionId = s.id;
         if (s.model_id) {
           sibModel.dataset.modelId = s.model_id;
@@ -4040,7 +4325,8 @@ const Sessions = (() => {
       const sibSepAfterReasoning = document.querySelector(".sib-sep-after-reasoning");
       if (sibReasoning) {
         const eff = (s.reasoning_effort || "off").toLowerCase();
-        sibReasoning.textContent = I18n.t(`sib.reasoning.${eff}`);
+        const sibReasoningText = $("sib-reasoning-text");
+        if (sibReasoningText) sibReasoningText.textContent = I18n.t(`sib.reasoning.${eff}`);
         sibReasoning.dataset.sessionId = s.id;
         sibReasoning.dataset.reasoningEffort = eff;
       }
@@ -4240,18 +4526,18 @@ const Sessions = (() => {
     // 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) {
+    appendToolResult(result, ui = null) {
       const messages = RenderTarget.current();
       const ctx = Sessions._toolGroupCtx(messages);
       if (ctx.group && ctx.item) {
-        _completeLastToolItem(ctx.group, result);
+        _completeLastToolItem(ctx.group, result, { ui });
         return;
       }
       if (messages) {
         const running = messages.querySelectorAll(".tool-item-status.running");
         if (running.length > 0) {
           const item = running[running.length - 1].closest(".tool-item");
-          if (item) { _completeToolItem(item, result); return; }
+          if (item) { _completeToolItem(item, result, { ui }); return; }
         }
       }
     },
@@ -4896,6 +5182,7 @@ const Sessions = (() => {
 
     /** Load the most recent page of history for a session (called on first visit). */
     loadHistory(id) {
+      window.ChatNavigator?.setSession(id);
       return _fetchHistory(id, null, false);
     },
 
@@ -4903,7 +5190,41 @@ const Sessions = (() => {
     loadMoreHistory(id) {
       const state = _historyState[id];
       if (!state || !state.hasMore) return;
-      return _fetchHistory(id, state.oldestCreatedAt, true);
+      return _fetchHistory(id, state.beforeCursor, true);
+    },
+
+    isHistoricalWindow() {
+      const state = _historyState[_activeId];
+      return !!(state?.hasAfter || state?.replacing);
+    },
+
+    loadNewerHistory() {
+      const state = _historyState[_activeId];
+      if (!state?.hasAfter || !state.afterCursor) return;
+      return _fetchHistory(_activeId, null, false, { after: state.afterCursor });
+    },
+
+    jumpToHistory(roundId) {
+      return _fetchHistory(_activeId, null, false, { around: roundId, replace: true });
+    },
+
+    async loadLatestHistory() {
+      const id = _activeId;
+      const loaded = await _fetchHistory(id, null, false, { replace: true });
+      if (loaded && id === _activeId && Sessions.find(id)?.status === "running") {
+        WS.send({ type: "subscribe", session_id: id });
+      }
+      return loaded;
+    },
+
+    deferLiveHistory(event) {
+      if (!Sessions.isHistoricalWindow()) return false;
+      if (["history_user_message", "assistant_message", "tool_call", "tool_result"].includes(event.type)) {
+        const state = _historyState[_activeId];
+        state.liveRevision = (state.liveRevision || 0) + 1;
+      }
+      _showNewMessageBanner();
+      return true;
     },
 
     /** Check if there is more history to load for a session. */
@@ -4960,50 +5281,74 @@ const Sessions = (() => {
 (function() {
   let _isOpen = false;
 
-  // Toggle model dropdown when clicking on model name
+  function _closeModelDropdown() {
+    const dropdown = $("sib-model-dropdown");
+    if (dropdown) dropdown.style.display = "none";
+    _isOpen = false;
+    const sibModel = $("sib-model");
+    if (sibModel) sibModel.classList.remove("is-open");
+    ModelPicker.closeSubmodelPanel();
+  }
+
+  // Toggle model dropdown when clicking on model name. The caret beside it is a
+  // click target of its own: it opens the quick-switch panel — the same one the
+  // dropdown row exposes — without going through the full catalog first.
   document.addEventListener("click", async (e) => {
     const modelEl = e.target.closest("#sib-model");
+    const caretEl = e.target.closest("#sib-model .sib-caret");
     if (modelEl) {
       e.stopPropagation();
       if (modelEl.classList.contains("sib-model-disabled")) return;
+
+      if (_isOpen) {
+        _closeModelDropdown();
+        return;
+      }
+
+      if (caretEl) {
+        const opened = ModelPicker.toggleSubmodelPanel(modelEl, _sibSubInfo(modelEl), (name, displayName) => {
+          _switchSubModel(modelEl.dataset.sessionId, name, displayName);
+        });
+        if (opened) {
+          _isOpen = true;
+          modelEl.classList.add("is-open");
+        }
+        return;
+      }
+
       const dropdown = $("sib-model-dropdown");
       if (!dropdown) return;
 
-      if (_isOpen) {
-        dropdown.style.display = "none";
-        _isOpen = false;
-        ModelPicker.closeSubmodelPanel();
-      } else {
-        let subOptions = [];
-        try { subOptions = JSON.parse(modelEl.dataset.subModelOptions || "[]"); } catch (_) {}
-        const subInfo = {
-          options: Array.isArray(subOptions) ? subOptions : [],
-          current: modelEl.dataset.subModel || null,
-          cardModel: modelEl.dataset.cardModel || null
-        };
-        await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.dataset.modelId || null, subInfo);
+      await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.dataset.modelId || null, _sibSubInfo(modelEl));
 
-        // 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
+      // 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;
-      }
+      dropdown.style.display = "block";
+      _isOpen = true;
+      modelEl.classList.add("is-open");
       return;
     }
 
     // Close dropdown when clicking outside
     if (_isOpen && !e.target.closest(".sib-model-dropdown") && !e.target.closest(".sib-submodel-panel")) {
-      const dropdown = $("sib-model-dropdown");
-      if (dropdown) dropdown.style.display = "none";
-      _isOpen = false;
-      ModelPicker.closeSubmodelPanel();
+      _closeModelDropdown();
     }
   });
 
+  function _sibSubInfo(modelEl) {
+    let options = [];
+    try { options = JSON.parse(modelEl.dataset.subModelOptions || "[]"); } catch (_) {}
+    return {
+      options: Array.isArray(options) ? options : [],
+      current: modelEl.dataset.subModel || null,
+      cardModel: modelEl.dataset.cardModel || null
+    };
+  }
+
   // Populate dropdown with available models
   async function _populateModelDropdown(sessionId, currentModelId, subInfo) {
     subInfo = subInfo || { options: [], current: null, cardModel: null };
@@ -5049,12 +5394,7 @@ const Sessions = (() => {
   // Switch the session's current card. modelId is the stable runtime id,
   // modelName is for optimistic display.
   async function _switchModel(sessionId, modelId, modelName) {
-    const dropdown = $("sib-model-dropdown");
-    if (dropdown) {
-      dropdown.style.display = "none";
-      _isOpen = false;
-    }
-    ModelPicker.closeSubmodelPanel();
+    _closeModelDropdown();
 
     try {
       const res = await fetch(`/api/sessions/${sessionId}/model`, {
@@ -5085,12 +5425,7 @@ const Sessions = (() => {
   // Pin (or clear) the session's sub-model. Pass modelName=null to clear.
   // displayName is what we optimistically show in the status bar.
   async function _switchSubModel(sessionId, modelName, displayName) {
-    const dropdown = $("sib-model-dropdown");
-    if (dropdown) {
-      dropdown.style.display = "none";
-      _isOpen = false;
-    }
-    ModelPicker.closeSubmodelPanel();
+    _closeModelDropdown();
 
     try {
       const res = await fetch(`/api/sessions/${sessionId}/submodel`, {
@@ -5111,10 +5446,7 @@ const Sessions = (() => {
 
   // Navigate to media config.
   function _goConfigureMedia() {
-    const dropdown = $("sib-model-dropdown");
-    if (dropdown) dropdown.style.display = "none";
-    _isOpen = false;
-    ModelPicker.closeSubmodelPanel();
+    _closeModelDropdown();
     if (typeof Router !== "undefined") Router.navigate("settings");
     setTimeout(() => {
       const sec = document.getElementById("media-section");
@@ -5163,6 +5495,7 @@ const Sessions = (() => {
       // When no session exists yet (e.g. the New Session modal), browse the
       // real filesystem via /api/dirs instead of the session-scoped files API.
       const sessionLess = !sessionId;
+      const mobileLayout = window.matchMedia("(max-width: 768px)");
 
       let currentPath = currentDir;
       let selectedPath = currentDir;
@@ -5243,11 +5576,16 @@ const Sessions = (() => {
         row.appendChild(name);
         node.appendChild(row);
 
-        // Single-click: select this directory
+        // Mobile uses the conventional file-picker behavior: tap to enter.
+        // Desktop keeps single-click selection and double-click navigation.
         let clickTimer = null;
         row.addEventListener("click", (e) => {
           e.stopPropagation();
           if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
+          if (mobileLayout.matches) {
+            navigateTo(entry.absPath, true);
+            return;
+          }
           clickTimer = setTimeout(() => {
             clickTimer = null;
             listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
@@ -5259,6 +5597,7 @@ const Sessions = (() => {
         // Double-click: enter directory (navigate into it)
         row.addEventListener("dblclick", (e) => {
           e.stopPropagation();
+          if (mobileLayout.matches) return;
           if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
           navigateTo(entry.absPath, true);
         });
@@ -5271,12 +5610,36 @@ const Sessions = (() => {
 
       // Create modal overlay
       const overlay = document.createElement("div");
-      overlay.className = "modal-overlay";
+      overlay.className = "modal-overlay dp-overlay";
+
+      const cancelPicker = () => {
+        overlay.remove();
+        resolve(null);
+      };
 
       // Create modal content — Finder-style layout
       const modal = document.createElement("div");
       modal.className = "modal-content dp-modal";
 
+      // Mobile-only header — the desktop picker keeps its Finder-style layout.
+      const mobileHeader = document.createElement("div");
+      mobileHeader.className = "dp-mobile-header";
+
+      const mobileTitle = document.createElement("span");
+      mobileTitle.className = "dp-mobile-title";
+      mobileTitle.textContent = t("sessions.modal.dirpicker.title", "Select Working Directory");
+
+      const mobileCloseButton = document.createElement("button");
+      mobileCloseButton.type = "button";
+      mobileCloseButton.className = "dp-nav-btn dp-mobile-close";
+      mobileCloseButton.title = t("sib.dir.cancel", "Cancel");
+      mobileCloseButton.setAttribute("aria-label", mobileCloseButton.title);
+      mobileCloseButton.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"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+      mobileCloseButton.addEventListener("click", cancelPicker);
+
+      mobileHeader.appendChild(mobileTitle);
+      mobileHeader.appendChild(mobileCloseButton);
+
       // Left sidebar — quick-access places (favorites + locations)
       const sidebar = document.createElement("div");
       sidebar.className = "dp-sidebar";
@@ -5368,7 +5731,7 @@ const Sessions = (() => {
       const cancelButton = document.createElement("button");
       cancelButton.className = "btn btn-secondary";
       cancelButton.textContent = t("sib.dir.cancel", "取消");
-      cancelButton.onclick = () => { overlay.remove(); resolve(null); };
+      cancelButton.onclick = cancelPicker;
 
       const confirmButton = document.createElement("button");
       confirmButton.className = "btn btn-primary";
@@ -5381,6 +5744,7 @@ const Sessions = (() => {
       footer.appendChild(footerActions);
       main.appendChild(footer);
 
+      modal.appendChild(mobileHeader);
       modal.appendChild(sidebar);
       modal.appendChild(main);
 
@@ -5416,14 +5780,29 @@ const Sessions = (() => {
         };
 
         addSection("sib.dir.favorites", "Quick access", quickAccess);
-        if (directoryFavorites.length) {
+        // Favorites pointing at a quick-access place would render the same folder twice
+        const placePaths = new Set(sidebarPlaces.map(place => comparablePath(place.path)));
+        const userFavorites = directoryFavorites.filter(path => !placePaths.has(comparablePath(path)));
+        if (userFavorites.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)));
+          userFavorites.forEach(path => sidebar.appendChild(buildFavoriteSidebarItem(path)));
         }
         addSection("sib.dir.drives", "Drives", drives);
+        refreshSidebarActive();
+      }
+
+      // Highlight the sidebar entry that matches the directory being browsed
+      function refreshSidebarActive() {
+        const active = currentPathLoaded ? comparablePath(currentPath) : "";
+        sidebar.querySelectorAll("[data-path]").forEach(el => {
+          const isActive = el.dataset.path === active;
+          el.classList.toggle("active", isActive);
+          if (isActive) el.setAttribute("aria-current", "true");
+          else el.removeAttribute("aria-current");
+        });
       }
 
       function buildSidebarItem(place) {
@@ -5431,6 +5810,7 @@ const Sessions = (() => {
         item.type = "button";
         item.className = "dp-sidebar-item";
         item.title = place.path;
+        item.dataset.path = comparablePath(place.path);
 
         const icon = document.createElement("span");
         icon.className = "dp-sidebar-icon";
@@ -5460,6 +5840,7 @@ const Sessions = (() => {
         const openButton = document.createElement("button");
         openButton.type = "button";
         openButton.className = "dp-sidebar-item dp-sidebar-favorite-open";
+        openButton.dataset.path = comparablePath(path);
 
         const icon = document.createElement("span");
         icon.className = "dp-sidebar-icon";
@@ -5743,6 +6124,7 @@ const Sessions = (() => {
           currentPathLoaded = true;
           refreshBreadcrumb(effectivePath);
           refreshFavoriteButton();
+          refreshSidebarActive();
           listContainer.innerHTML = "";
           if (dirs.length === 0) {
             listContainer.innerHTML = `<div class="dp-empty">${t("sib.dir.empty", "空目录")}</div>`;
@@ -5948,7 +6330,9 @@ const Sessions = (() => {
       const sessionId = dirEl.dataset.sessionId;
       const currentDir = dirEl.dataset.workingDir || dirEl.textContent;
 
+      dirEl.classList.add("is-open");
       const newDir = await showDirectoryPicker(currentDir, sessionId);
+      dirEl.classList.remove("is-open");
       if (newDir && newDir !== currentDir) {
         _changeWorkingDirectory(sessionId, newDir);
       }
@@ -6108,8 +6492,9 @@ const Sessions = (() => {
       
       // Update UI optimistically (will be confirmed by session_update broadcast)
       const sibDir = $("sib-dir");
-      if (sibDir) {
-        sibDir.textContent = newDir;
+      const sibDirText = $("sib-dir-text");
+      if (sibDir && sibDirText) {
+        sibDirText.textContent = newDir;
         sibDir.title = `${newDir} (${I18n.t("sib.dir.tooltip")})`;
         sibDir.dataset.workingDir = newDir;
       }
@@ -6143,6 +6528,7 @@ const Sessions = (() => {
       if (_isOpen) {
         dropdown.style.display = "none";
         _isOpen = false;
+        el.classList.remove("is-open");
         return;
       }
 
@@ -6154,12 +6540,15 @@ const Sessions = (() => {
       dropdown.style.transform = "translate(-50%, -100%)";
       dropdown.style.display = "block";
       _isOpen = true;
+      el.classList.add("is-open");
       return;
     }
 
     if (_isOpen && !e.target.closest("#sib-reasoning-dropdown")) {
       const dropdown = $("sib-reasoning-dropdown");
       if (dropdown) dropdown.style.display = "none";
+      const el = $("sib-reasoning");
+      if (el) el.classList.remove("is-open");
       _isOpen = false;
     }
   });
@@ -6200,6 +6589,8 @@ const Sessions = (() => {
       dropdown.style.display = "none";
       _isOpen = false;
     }
+    const sibReasoningEl = $("sib-reasoning");
+    if (sibReasoningEl) sibReasoningEl.classList.remove("is-open");
 
     try {
       const res = await fetch(`/api/sessions/${sessionId}/reasoning_effort`, {
@@ -6210,11 +6601,10 @@ const Sessions = (() => {
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || "Unknown error");
 
-      const el = $("sib-reasoning");
-      if (el) {
-        el.textContent = I18n.t(`sib.reasoning.${level}`);
-        el.dataset.reasoningEffort = level;
-      }
+      const textEl = $("sib-reasoning-text");
+      if (textEl) textEl.textContent = I18n.t(`sib.reasoning.${level}`);
+      const sibReasoningEl = $("sib-reasoning");
+      if (sibReasoningEl) sibReasoningEl.dataset.reasoningEffort = level;
     } catch (e) {
       console.error("Failed to switch reasoning effort:", e);
       alert("Failed to switch reasoning effort: " + e.message);