openclacky 1.5.19 → 1.5.21

data/lib/clacky/web/sessions.js

@@ -67,7 +67,7 @@ const Sessions = (() => {
   const _groups = new Map(GROUP_SOURCES.map(source => [source, {
     count: 0,               // total sessions in this group (server-side, unpaginated)
     latestUpdatedAt: null,  // newest activity — decides the virtual entry's sort position
-    before: null,           // cursor: oldest activity time loaded into the sub-view
+    before: null,           // cursor: server-issued sort key of the last row loaded into the sub-view
     hasMore: false,
     loadingMore: false,
   }]));
@@ -87,6 +87,9 @@ const Sessions = (() => {
   // Project-assigned sessions always render in the project section.
   const _groupOf = s => (s && !s.project_id && _groups.get(s.source)) || null;
 
+  // Server-issued sort key of the last loaded main-list row — the loadMore cursor.
+  let   _cursor            = null;
+
   // Merge server-reported group stats (REST/WS `groups` payload) into local state.
   function _applyGroupStats(stats) {
     if (!stats) return;
@@ -619,7 +622,6 @@ const Sessions = (() => {
         try {
           const session = await NewSessionStore.createSession({ existingSessions: _sessions, useDefaults: true });
           if (!session) return;
-          NewSessionStore.reset();
           // Add to local list immediately so renderList shows it and findOrFetch
           // can locate it synchronously (without a round-trip to the API).
           if (!_sessions.find(s => s.id === session.id)) {
@@ -918,6 +920,7 @@ const Sessions = (() => {
       item.className = "img-preview-item";
       item.title = img.name;
       const thumbnail = document.createElement("img");
+      thumbnail.className = "img-preview-thumb";
       thumbnail.src = img.dataUrl;
       thumbnail.alt = img.name;
       const removeBtn = document.createElement("button");
@@ -979,6 +982,41 @@ const Sessions = (() => {
   // ── sendMessage ────────────────────────────────────────────────────────
   let _sending = false;
 
+  // Countdown state is per session; only the backend decides when to continue.
+  const _feedbackCountdowns = new Map();
+  function _renderFeedbackCountdown() {
+    const state = _feedbackCountdowns.get(Sessions.activeId);
+    document.querySelectorAll(".feedback-card:not(.feedback-card--submitted) .feedback-status").forEach(el => {
+      el.textContent = state?.deadline_ms != null
+        ? I18n.t("chat.feedback_countdown", {
+            seconds: Math.max(0, Math.ceil((state.deadline_ms - Date.now()) / 1000))
+          })
+        : I18n.t("chat.feedback_waiting");
+    });
+  }
+
+  function _hasPendingFeedback() {
+    return !!document.querySelector(".feedback-card:not(.feedback-card--submitted)");
+  }
+
+  function _refreshFeedbackStatus() {
+    _renderFeedbackCountdown();
+    const session = Sessions._lastSession;
+    if (session && session.id === Sessions.activeId) {
+      Sessions.updateStatusBar(session.status);
+      Sessions.updateInfoBar(session);
+    }
+  }
+
+  function _interveneFeedbackCountdown() {
+    const state = _feedbackCountdowns.get(Sessions.activeId);
+    if (!state || state.intervened) return;
+    state.intervened = true;
+    state.deadline_ms = null;
+    WS.send({ type: "feedback_intervene", session_id: Sessions.activeId, request_id: state.request_id });
+    _renderFeedbackCountdown();
+  }
+
   // ── ask_user feedback card ────────────────────────────────────────────
   //
   // The backend always sends a normalized `questions` array, but older stored
@@ -1011,31 +1049,7 @@ const Sessions = (() => {
     }];
   }
 
-  function _feedbackNeedsCard(list) {
-    return list.some(q => q.options.length > 0);
-  }
-
-  function _feedbackPlainText(list, context) {
-    // Normalize bullet symbols to markdown list format so marked renders them as <ul>
-    const normalizeBullets = (t) => t ? t.replace(/^[•·‣▸▪\-–]\s*/gm, "- ") : t;
-    const parts = [];
-    if (context && context.trim()) parts.push(context.trim());
-    list.forEach(q => {
-      parts.push(q.question);
-      if (q.description) parts.push(q.description);
-    });
-    return parts.map(normalizeBullets).join("\n\n");
-  }
-
-  // A single-choice question with no free-text escape submits on click, which
-  // keeps the one-question case at one tap. Anything else needs an explicit
-  // submit so partial answers aren't sent.
-  function _feedbackIsInstant(list) {
-    return list.length === 1 && !list[0].multi && !list[0].allow_free_text;
-  }
-
   function _buildFeedbackCard(list, context, answered) {
-    const instant = _feedbackIsInstant(list);
     // Multiple open questions are walked one at a time. A submitted card is a
     // read-only record, so it stacks instead — hiding past questions there
     // would lose what was actually asked.
@@ -1070,7 +1084,7 @@ const Sessions = (() => {
       }
       html += `<div class="feedback-options">`;
       q.options.forEach((opt, oi) => {
-        const selected = !instant && q.recommended === oi ? " is-selected" : "";
+        const selected = q.recommended === oi ? " is-selected" : "";
         const rec = q.recommended === oi
           ? `<span class="feedback-rec">${escapeHtml(I18n.t("chat.feedback_recommended"))}</span>` : "";
         html += `<button class="feedback-option-btn${selected}" data-question-index="${qi}" data-option-index="${oi}"` +
@@ -1084,22 +1098,19 @@ const Sessions = (() => {
       html += `</div>`;
     });
 
-    if (!instant) {
-      html += `<div class="feedback-actions">`;
-      if (stepped) {
-        html += `<button class="feedback-nav-btn feedback-back-btn" disabled>` +
-                `${escapeHtml(I18n.t("chat.feedback_back"))}</button>` +
-                `<button class="feedback-nav-btn feedback-next-btn">` +
-                `${escapeHtml(I18n.t("chat.feedback_next"))}</button>`;
-      }
-      html += `<button class="btn-primary feedback-submit-btn"${answered ? " disabled" : ""}` +
-              `${stepped ? " hidden" : ""}>${escapeHtml(I18n.t("chat.feedback_submit"))}</button>`;
-      html += `</div>`;
+    html += `<div class="feedback-actions"><span class="feedback-status">${escapeHtml(I18n.t(answered ? "chat.feedback_answered" : "chat.feedback_waiting"))}</span>`;
+    if (stepped) {
+      html += `<button class="feedback-nav-btn feedback-back-btn" disabled>` +
+              `${escapeHtml(I18n.t("chat.feedback_back"))}</button>` +
+              `<button class="feedback-nav-btn feedback-next-btn">` +
+              `${escapeHtml(I18n.t("chat.feedback_next"))}</button>`;
     }
-    html += `<div class="feedback-hint">${I18n.t("chat.feedback_hint")}</div>`;
+    html += `<button class="btn-primary feedback-submit-btn"${answered ? " disabled" : ""}` +
+            `${stepped ? " hidden" : ""}>${escapeHtml(I18n.t("chat.feedback_submit"))}</button>`;
+    html += `</div>`;
 
     card.innerHTML = html;
-    if (!answered) _wireFeedbackCard(card, list, instant, stepped);
+    if (!answered) _wireFeedbackCard(card, list, stepped);
     return card;
   }
 
@@ -1128,6 +1139,7 @@ const Sessions = (() => {
     card.querySelectorAll(".feedback-option-btn, .feedback-submit-btn, .feedback-free-text, .feedback-nav-btn")
         .forEach(el => { el.disabled = true; });
     card.classList.add("feedback-card--submitted");
+    card.querySelector(".feedback-status").textContent = I18n.t("chat.feedback_answered");
 
     const input = $("user-input");
     if (input) Composer.setText(input, lines.join("\n"));
@@ -1135,7 +1147,7 @@ const Sessions = (() => {
     return true;
   }
 
-  function _wireFeedbackCard(card, list, instant, stepped) {
+  function _wireFeedbackCard(card, list, stepped) {
     let step = 0;
 
     const showStep = (target) => {
@@ -1176,15 +1188,6 @@ const Sessions = (() => {
       btn.onclick = () => {
         const qi = Number(btn.dataset.questionIndex);
 
-        if (instant) {
-          card.querySelectorAll(".feedback-option-btn").forEach(b => { b.disabled = true; });
-          card.classList.add("feedback-card--submitted");
-          const input = $("user-input");
-          if (input) Composer.setText(input, list[qi].options[Number(btn.dataset.optionIndex)]);
-          _sendMessage();
-          return;
-        }
-
         if (!list[qi].multi) {
           card.querySelectorAll(`.feedback-option-btn[data-question-index="${qi}"]`)
               .forEach(b => b.classList.remove("is-selected"));
@@ -1381,16 +1384,19 @@ const Sessions = (() => {
     _imageSeq = 0;
     _renderAttachmentPreviews();
 
+    _interveneFeedbackCountdown();
     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
     // the feedback; make the frontend reflect that immediately.
     document.querySelectorAll(".feedback-card:not(.feedback-card--submitted)").forEach(card => {
-      card.querySelectorAll(".feedback-option-btn, .feedback-submit-btn, .feedback-free-text")
+      card.querySelectorAll("button, input")
           .forEach(el => { el.disabled = true; });
       card.classList.add("feedback-card--submitted");
+      card.querySelector(".feedback-status").textContent = I18n.t("chat.feedback_answered");
     });
+    _refreshFeedbackStatus();
 
     Composer.clear(input);
     if (typeof QuoteSelect !== "undefined") QuoteSelect.clear();
@@ -1419,6 +1425,64 @@ const Sessions = (() => {
     }
     // contenteditable composer: chip deletion, plain-text paste, Shift+Enter.
     Composer.init($("user-input"));
+    setInterval(_renderFeedbackCountdown, 250);
+    document.addEventListener("input", (e) => {
+      if (e.target.closest?.("#user-input, .feedback-free-text")) _interveneFeedbackCountdown();
+    });
+    document.addEventListener("click", (e) => {
+      if (e.target.closest?.(".feedback-option-btn, .feedback-nav-btn, .feedback-dot")) {
+        _interveneFeedbackCountdown();
+      }
+    }, true);
+
+    const modeButton = $("sib-mode");
+    const modeMenu = $("sib-mode-menu");
+    const closeModeMenu = () => {
+      modeMenu.hidden = true;
+      modeButton.setAttribute("aria-expanded", "false");
+      modeButton.classList.remove("is-open");
+    };
+    modeButton?.addEventListener("click", () => {
+      const open = modeMenu.hidden;
+      modeMenu.hidden = !open;
+      modeButton.setAttribute("aria-expanded", String(open));
+      modeButton.classList.toggle("is-open", open);
+      if (open) {
+        const rect = modeButton.getBoundingClientRect();
+        modeMenu.style.left = `${Math.max(8, Math.min(rect.left, window.innerWidth - 248))}px`;
+        modeMenu.style.bottom = `${window.innerHeight - rect.top + 6}px`;
+        modeMenu.querySelector('[aria-checked="true"]')?.focus();
+      }
+    });
+    document.addEventListener("click", (event) => {
+      if (!event.target.closest("#sib-mode, #sib-mode-menu")) closeModeMenu();
+    });
+    modeMenu?.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") { closeModeMenu(); modeButton.focus(); }
+    });
+    modeMenu?.addEventListener("click", async (event) => {
+      const option = event.target.closest("[data-permission-mode]");
+      if (!option) return;
+      const sessionId = Sessions.activeId;
+      const mode = option.dataset.permissionMode;
+      closeModeMenu();
+      modeButton.disabled = true;
+      try {
+        const response = await fetch(`/api/sessions/${sessionId}/permission_mode`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ permission_mode: mode })
+        });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || "Failed to switch permission mode");
+        const session = Sessions.find(sessionId);
+        if (session) session.permission_mode = data.permission_mode;
+      } catch (error) {
+        Modal.toast(error.message);
+      } finally {
+        Sessions.updateInfoBar(Sessions.find(Sessions.activeId));
+      }
+    });
 
     // Send & attach buttons
     const behaviorMenu = $("input-behavior-menu");
@@ -2015,6 +2079,11 @@ const Sessions = (() => {
     }
 
     switch (ev.type) {
+      case "error": {
+        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; historyCtx.lastItem = null; }
+        window.renderErrorEvent(ev, container);
+        break;
+      }
       case "history_user_message": {
         // Collapse any open tool group from the previous round
         if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; historyCtx.lastItem = null; }
@@ -2027,6 +2096,7 @@ const Sessions = (() => {
         el.innerHTML = _buildUserBubbleHtml(ev);
         if (ev.created_at) el.dataset.createdAt = ev.created_at;
         if (ev.round_id) el.dataset.roundId = ev.round_id;
+        if (ev.task_id) el.dataset.taskId = ev.task_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.
@@ -2034,8 +2104,7 @@ const Sessions = (() => {
         const wrap = document.createElement("div");
         wrap.className = "msg-user-wrap";
         wrap.appendChild(el);
-        _appendUserActionBar(el, wrap);
-        _appendMsgTime(wrap, ev.created_at);
+        _appendMsgTime(_appendUserActionBar(el, wrap), ev.created_at);
         outerContainer.appendChild(wrap);
         break;
       }
@@ -2065,15 +2134,18 @@ const Sessions = (() => {
 
       case "tool_result": {
         if (historyCtx.group && historyCtx.lastItem) {
-          const status = historyCtx.lastItem.querySelector(".tool-item-status");
+          // Replay emits all calls of a round before their results, so pair results in call order.
+          const running = historyCtx.group.querySelector(".tool-item-status.running");
+          const item = (running && running.closest(".tool-item")) || historyCtx.lastItem;
+          const status = item.querySelector(".tool-item-status");
           if (status) { status.className = "tool-item-status ok"; status.textContent = "✓"; }
-          const toolName = historyCtx.lastItem.dataset.toolName || "";
+          const toolName = item.dataset.toolName || "";
           if (toolName === "edit" || toolName === "write") {
             let parsedArgs = null;
-            try { parsedArgs = JSON.parse(historyCtx.lastItem.dataset.argsJson || "null"); } catch (_) {}
-            if (parsedArgs) _renderEditWriteDiff(historyCtx.lastItem, toolName, parsedArgs);
+            try { parsedArgs = JSON.parse(item.dataset.argsJson || "null"); } catch (_) {}
+            if (parsedArgs) _renderEditWriteDiff(item, toolName, parsedArgs);
           }
-          const stdout = historyCtx.lastItem.querySelector(".tool-item-stdout");
+          const stdout = item.querySelector(".tool-item-stdout");
           if (stdout) {
             const ui = ev.ui;
             const promoted = ui && ui.type === "web_search";
@@ -2082,7 +2154,7 @@ const Sessions = (() => {
               stdout.style.display = "none";
             } else if (resultStr && !stdout.textContent.trim()) {
               stdout.innerHTML = _ansiToHtml(resultStr);
-              const header = historyCtx.lastItem.querySelector(".tool-item-header");
+              const header = item.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.style.display = "none";
@@ -2163,18 +2235,6 @@ const Sessions = (() => {
         const rfList = _normalizeFeedbackQuestions(ev.questions, ev.question, ev.options);
         if (rfList.length === 0) break;
 
-        if (!_feedbackNeedsCard(rfList)) {
-          // Nothing selectable — render as plain assistant bubble
-          const rfText = _feedbackPlainText(rfList, rfContext);
-          const rfEl = document.createElement("div");
-          rfEl.className = "msg msg-assistant";
-          rfEl.dataset.raw = rfText;
-          rfEl.innerHTML = _renderMarkdown(rfText);
-          _appendCopyButton(rfEl);
-          container.appendChild(rfEl);
-          break;
-        }
-
         container.appendChild(_buildFeedbackCard(rfList, rfContext, ev._answered === true));
         break;
       }
@@ -2268,6 +2328,7 @@ const Sessions = (() => {
       }
 
       const events = data.events || [];
+      let lastRoundError = null;
 
       // Pre-scan: mark each request_feedback as answered.
       // A feedback card is disabled as soon as any subsequent history_user_message appears
@@ -2275,6 +2336,8 @@ const Sessions = (() => {
       {
         let lastFeedbackIdx = -1;
         events.forEach((ev, i) => {
+          if (ev.type === "history_user_message") lastRoundError = null;
+          if (ev.type === "error") lastRoundError = ev;
           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;
@@ -2286,6 +2349,8 @@ const Sessions = (() => {
       // Dedup by created_at: skip rounds already rendered (e.g. arrived via live WS)
       const dedup = _renderedCreatedAt[id] || (_renderedCreatedAt[id] = new Set());
       const frag  = document.createDocumentFragment();
+      // The unresolved latest error uses the live card (with actions) below.
+      const currentError = !prepend && !data.has_after && _sessions.find(s => s.id === id)?.status === "error" ? lastRoundError : null;
 
       let currentCreatedAt = null;
       let skipRound        = false;
@@ -2298,7 +2363,7 @@ const Sessions = (() => {
           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);
+        if (!skipRound && ev !== currentError) _renderHistoryEvent(ev, frag, historyCtx);
       });
 
       // Collapse any tool group still open at end of page
@@ -2334,6 +2399,8 @@ const Sessions = (() => {
           if (!prepend && !state.hasAfter) _flushPendingStdout();
         }
 
+        _refreshFeedbackStatus();
+
         // If no more history remains, insert a "beginning of conversation" marker at the top.
         // Remove any existing marker first to avoid duplicates.
         messages.querySelector(".history-start-marker")?.remove();
@@ -2436,10 +2503,13 @@ const Sessions = (() => {
     const now = new Date();
     const pad = n => String(n).padStart(2, "0");
     const hhmm = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
-    const sameDay = d.getFullYear() === now.getFullYear() &&
-                    d.getMonth()    === now.getMonth()    &&
-                    d.getDate()     === now.getDate();
-    return sameDay ? hhmm : `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hhmm}`;
+    const sameYear = d.getFullYear() === now.getFullYear();
+    const sameDay = sameYear &&
+                    d.getMonth() === now.getMonth() &&
+                    d.getDate()  === now.getDate();
+    if (sameDay) return hhmm;
+    const md = `${d.getMonth() + 1}月${d.getDate()}日`;
+    return sameYear ? `${md} ${hhmm}` : `${d.getFullYear()}年${md} ${hhmm}`;
   }
 
   // Append a .msg-time span to a message element.
@@ -2454,15 +2524,15 @@ const Sessions = (() => {
 
   // ── User message action bar (copy + edit) ───────────────────────────────
 
-  const COPY_SVG = `<svg class="msg-user-copy-icon" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
-    `<path fill="currentColor" d="M10 1H4a2 2 0 0 0-2 2v8h1.5V3a.5.5 0 0 1 .5-.5h6V1zm3 3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm.5 10a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v8z"/>` +
+  const COPY_SVG = `<svg class="msg-user-copy-icon" 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">` +
+    `<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>` +
   `</svg>` +
-  `<svg class="msg-user-copy-icon-check" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
-    `<path fill="currentColor" d="M13.5 3.5 6 11 2.5 7.5 1 9l5 5 9-9z"/>` +
+  `<svg class="msg-user-copy-icon-check" 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="M20 6 9 17l-5-5"/>` +
   `</svg>`;
 
-  const EDIT_SVG = `<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">` +
-    `<path fill="currentColor" d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354l-1.086-1.086zM11.189 6.25 9.75 4.81l-6.286 6.287a.25.25 0 0 0-.064.108l-.558 1.953 1.953-.558a.249.249 0 0 0 .108-.064l6.286-6.286z"/>` +
+  const EDIT_SVG = `<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>`;
 
   function _appendUserActionBar(el, wrap) {
@@ -2506,6 +2576,7 @@ const Sessions = (() => {
     // chunk — editing them would silently no-op on the backend.
     if (el.dataset.editable !== "false") bar.appendChild(editBtn);
     wrap.appendChild(bar);
+    return bar;
   }
 
   function _activeSessionIsRunning() {
@@ -2882,22 +2953,65 @@ const Sessions = (() => {
   // visible in a single-line ellipsis layout. Backend already gives us a
   // ±N byte window, but for ASCII-heavy lines that's still wider than the
   // sidebar can render on one line. We trim the head when the match sits
-  // too far to the right, keeping ~`headRoom` chars before it.
-  function _centerSnippet(text, query, headRoom = 16) {
-    const t = text || "";
+  // too far to the right, keeping ~`headRoom` chars before it and snapping
+  // forward to a word boundary so the head never starts mid-token.
+  function _centerSnippet(text, query, headRoom = 28) {
+    const t = (text || "").trim();
     const q = (query || "").trim();
     if (!q) return t;
     const idx = t.toLowerCase().indexOf(q.toLowerCase());
     if (idx <= headRoom) return t;
-    return "…" + t.slice(idx - headRoom);
+    let from = idx - headRoom;
+    const space = t.indexOf(" ", from);
+    if (space !== -1 && space - from <= 12) from = space + 1;
+    return "…" + t.slice(from).replace(/^…\s*/, "");
   }
 
-  // Reveal an overflowing session title on hover without moving its badges or
-  // action button. Measurement waits for the hover action-button transition so
-  // the distance reflects the title's final available width.
-  function _setupSessionNameOverflow(item) {
-    const viewport = item.querySelector(".session-name__text");
-    const content = viewport?.querySelector(".session-name__content");
+  // Snippets are raw grep hits from session JSON / chunk markdown, so drop
+  // JSON escapes plus the markdown syntax that reads as noise in a one-line
+  // teaser (**bold**, `code`, [label](url), list markers, stray ellipses).
+  function _cleanSnippet(text) {
+    return (text || "")
+      .replace(/```[\s\S]*?```/g, " ")
+      .replace(/\\[nrt]/g, " ")
+      .replace(/\\(["\\/])/g, "$1")
+      .replace(/!?\[([^\]]*)\]\([^)]*\)/g, "$1")
+      .replace(/(^|\s)[-*+>]\s+/g, "$1")
+      .replace(/(^|\s)#{1,6}\s+/g, "$1")
+      .replace(/\*\*([^*]+)\*\*/g, "$1")
+      .replace(/__([^_]+)__/g, "$1")
+      .replace(/~~([^~]+)~~/g, "$1")
+      // Orphan markers left behind when the grep window cuts a pair in half.
+      .replace(/(?<![\w*])\*{2,}(?![\w*])/g, "")
+      .replace(/`/g, "")
+      .replace(/<\/?[a-zA-Z][^>]{0,40}>/g, " ")
+      // Multi-byte chars that grep cut in half surface as consecutive "?".
+      .replace(/\?{2,}/g, "…")
+      // JSON key/value remnants when the hit lands inside a serialized field.
+      .replace(/^…?\s*"?[^"]{0,24}"\s*:\s*/, "…")
+      .replace(/…\s*["'，,、。；;：:\s]+/g, "…")
+      .replace(/([\u4e00-\u9fff）)】」])\?+(?=…|\.\.\.)/g, "$1…")
+      .replace(/^[":;,\s]+|[";,\s]+$/g, "")
+      .replace(/(?:…|\.{3,})+/g, "…")
+      .replace(/([，。；：、！？）】」])\s+/g, "$1")
+      .replace(/\s+/g, " ")
+      .trim();
+  }
+
+  // Reveal a single-line overflowing label on hover. Callers provide their
+  // own viewport/content selectors and CSS properties so the measurement and
+  // motion behaviour stays consistent across compact UI surfaces.
+  function _setupHorizontalTextOverflow(item, {
+    viewportSelector,
+    contentSelector,
+    activeClass,
+    distanceProperty,
+    durationProperty,
+    revealPadding = 16,
+    measureDelay = 170,
+  }) {
+    const viewport = item.querySelector(viewportSelector);
+    const content = viewport?.querySelector(contentSelector);
     if (!viewport || !content) return;
 
     let measureTimer = null;
@@ -2909,25 +3023,55 @@ const Sessions = (() => {
 
         // Move the final characters just inside the fade instead of leaving
         // them permanently translucent at the viewport edge.
-        const distance = overflow + 16;
+        const distance = overflow + revealPadding;
         const duration = Math.min(8, Math.max(1.4, distance / 45));
-        item.style.setProperty("--session-name-scroll-distance", `${distance}px`);
-        item.style.setProperty("--session-name-scroll-duration", `${duration}s`);
-        item.classList.add("session-name-scrolling");
-      }, 170);
+        item.style.setProperty(distanceProperty, `${distance}px`);
+        item.style.setProperty(durationProperty, `${duration}s`);
+        item.classList.add(activeClass);
+      }, measureDelay);
     });
     item.addEventListener("pointerleave", () => {
       clearTimeout(measureTimer);
       measureTimer = null;
-      item.classList.remove("session-name-scrolling");
-      item.style.removeProperty("--session-name-scroll-distance");
-      item.style.removeProperty("--session-name-scroll-duration");
+      item.classList.remove(activeClass);
+      item.style.removeProperty(distanceProperty);
+      item.style.removeProperty(durationProperty);
+    });
+  }
+
+  // Reveal an overflowing session title without moving its badges or action
+  // button. The delay lets the hover action-button transition settle before
+  // the available title width is measured.
+  function _setupSessionNameOverflow(item) {
+    _setupHorizontalTextOverflow(item, {
+      viewportSelector: ".session-name__text",
+      contentSelector: ".session-name__content",
+      activeClass: "session-name-scrolling",
+      distanceProperty: "--session-name-scroll-distance",
+      durationProperty: "--session-name-scroll-duration",
     });
   }
 
   //
   // Build and append a single session-item <div> into `container`.
   // Used by both the general list and the coding section.
+  // Session display title, shared by the sidebar rows and the header title:
+  // cron sessions embed a glyph prefix, and built-in setup sessions ship fixed
+  // English names that must follow the UI language.
+  const CRON_NAME_PREFIXES = ["\u23F0 ", "\u25B6 "];
+  const BUILTIN_SETUP_NAMES = {
+    "Onboard":           "sessions.setup.name",
+    "🌐 Browser Setup":   "sessions.setup.browser.name",
+  };
+
+  function _sessionDisplayName(s) {
+    const cronPrefix = CRON_NAME_PREFIXES.find(p => s.name && s.name.startsWith(p)) || "";
+    const storedName = (cronPrefix ? s.name.slice(cronPrefix.length) : s.name)
+      || _relativeTime(s.created_at);
+    const nameKey = s.source === "setup" ? BUILTIN_SETUP_NAMES[storedName] : null;
+    return { cronPrefix, nameKey, text: nameKey ? I18n.t(nameKey) : storedName };
+  }
+
   function _renderSessionItem(container, s) {
     const el = document.createElement("div");
     el.className = "session-item" + (s.id === _activeId ? " active" : "");
@@ -2938,18 +3082,7 @@ const Sessions = (() => {
     // Cron sessions embed a "⏰ " (scheduled) or "▶ " (manually run) prefix in
     // their name — render either as the lucide alarm-clock-check icon instead
     // of the raw glyph.
-    const CRON_NAME_PREFIXES = ["\u23F0 ", "\u25B6 "];
-    const cronPrefix = CRON_NAME_PREFIXES.find(p => s.name && s.name.startsWith(p)) || "";
-    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 { cronPrefix, nameKey, text: displayName } = _sessionDisplayName(s);
     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>`
       : (nameKey === "sessions.setup.browser.name"
@@ -3012,7 +3145,7 @@ const Sessions = (() => {
       : "";
 
     const snippetHtml = (s._matchVia === "content" && s.search_snippet)
-      ? `<div class="session-snippet">${_highlightSnippet(_centerSnippet(s.search_snippet, _filter.q), _filter.q)}</div>`
+      ? `<div class="session-snippet">${_highlightSnippet(_centerSnippet(_cleanSnippet(s.search_snippet), _filter.q), _filter.q)}</div>`
       : "";
 
     el.innerHTML = `
@@ -3252,6 +3385,7 @@ const Sessions = (() => {
       _initComposer();
       _initSearch();
       _initMessageHistory();
+      Sessions._initTodoPanel();
       // 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.
@@ -3274,9 +3408,10 @@ const Sessions = (() => {
       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).
+        // localhost). Links that belong to the platform (not a dev server) opt
+        // out with data-open-external, so they still get a real browser tab.
         const localLink = e.target.closest("a[href]");
-        if (localLink) {
+        if (localLink && !localLink.hasAttribute("data-open-external")) {
           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) &&
@@ -3334,14 +3469,27 @@ const Sessions = (() => {
     // ── List management ───────────────────────────────────────────────────
 
     /** Populate list from initial session_list WS event (connect only). */
-    setAll(list, hasMore = false, groups = {}) {
+    setAll(list, hasMore = false, groups = {}, nextCursor = null) {
       _sessions.length = 0;
       _sessions.push(...list);
       _hasMore = !!hasMore;
+      _cursor  = nextCursor;
       _groups.forEach(g => { g.count = 0; g.latestUpdatedAt = null; });
       _applyGroupStats(groups);
     },
 
+    /** Whether a full snapshot sorts inside the loaded pages of the main
+     *  list. Grouped sessions render behind their group entry instead. */
+    belongsToLoadedPage(session) {
+      if (_groupOf(session) || session.archived_at) return false;
+      if (session.pinned || !_hasMore || !_cursor) return true;
+      const t = session.updated_at || session.created_at;
+      if (!t) return false;
+      // Same-second ties fall back to the server's id order, like the cursor itself.
+      const diff = new Date(t) - new Date(_cursor.before);
+      return diff > 0 || (diff === 0 && session.id >= _cursor.before_id);
+    },
+
     /** Insert or refresh a newly created session in the local list. */
     add(session) {
       if (!session || !session.id) return;
@@ -3413,6 +3561,7 @@ const Sessions = (() => {
      *  Unknown sessions stay in the extra cache until an explicit creation
      *  update promotes them, preserving the paged sidebar boundary. */
     patch(id, fields) {
+      if (id === _activeId && fields.status && fields.status !== "error") Sessions.archiveErrors();
       const s = _sessions.find(s => s.id === id);
       const extra = _extraSessions.find(e => e.id === id);
       const before = s || extra;
@@ -3432,6 +3581,7 @@ const Sessions = (() => {
       }
 
       const updated = s || _extraSessions.find(e => e.id === id);
+      if (id === _activeId && "name" in fields) Sessions.updateChatHeader(updated);
       const isGroup = _groupOf(updated);
       if (wasGroup !== isGroup) {
         if (wasGroup) wasGroup.count = Math.max(0, wasGroup.count - 1);
@@ -3524,19 +3674,8 @@ const Sessions = (() => {
       Sessions.renderList();
 
       try {
-        // 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 || 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;
-        }, null);
-
         const params = new URLSearchParams({ limit: "10", exclude_type: GROUP_SOURCES.join(",") });
-        if (oldest)          params.set("before", oldest);
+        if (_cursor)         { params.set("before", _cursor.before); params.set("before_id", _cursor.before_id); }
         if (_filter.q)       params.set("q",    _filter.q);
         if (_filter.date)    params.set("date", _filter.date);
         if (_filter.type)    params.set("type", _filter.type);
@@ -3549,6 +3688,7 @@ const Sessions = (() => {
           if (!_sessions.find(x => x.id === s.id)) _sessions.push(s);
         });
         _hasMore = !!data.has_more;
+        if (data.next_cursor) _cursor = data.next_cursor;
         _applyGroupStats(data.groups);
       } catch (e) {
         console.error("loadMore error:", e);
@@ -3580,7 +3720,7 @@ const Sessions = (() => {
 
       try {
         const params = new URLSearchParams({ limit: "10", type: source });
-        if (group.before) params.set("before", group.before);
+        if (group.before) { params.set("before", group.before.before); params.set("before_id", group.before.before_id); }
 
         const res  = await fetch(`/api/sessions?${params}`);
         if (!res.ok) return;
@@ -3590,16 +3730,7 @@ const Sessions = (() => {
         rows.forEach(s => {
           if (!_sessions.find(x => x.id === s.id)) _sessions.push(s);
         });
-        // Advance cursor to the oldest activity time in THIS batch
-        // (exclude pinned — backend returns all pinned on the first page,
-        // bypassing pagination, so their time must not drag the cursor back).
-        const oldest = rows.reduce((min, s) => {
-          if (s.pinned) return min;
-          const t = s.updated_at || s.created_at;
-          if (!t) return min;
-          return (!min || t < min) ? t : min;
-        }, null);
-        if (oldest) group.before = oldest;
+        if (data.next_cursor) group.before = data.next_cursor;
         group.hasMore = !!data.has_more;
         _applyGroupStats(data.groups);
       } catch (e) {
@@ -3963,7 +4094,8 @@ const Sessions = (() => {
         // Within same pinned status, sort by last activity (newest first)
         const ta = a.updated_at || a.created_at;
         const tb = b.updated_at || b.created_at;
-        return new Date(tb || 0) - new Date(ta || 0);
+        // Same-second ties follow the server's id order so arrival order can't reshuffle rows.
+        return (new Date(tb || 0) - new Date(ta || 0)) || (a.id < b.id ? 1 : a.id > b.id ? -1 : 0);
       };
 
       // ── Sidebar list always shows the full session set, sorted ───────
@@ -4085,12 +4217,23 @@ const Sessions = (() => {
       }
     },
 
+    /** Archive-box icon (shared by both session menus). */
+    _iconArchive() {
+      return `<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"><rect x="2" y="4" width="20" height="5" rx="1"/><path d="M4 9v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><line x1="10" y1="14" x2="14" y2="14"/></svg>`;
+    },
+
+    /** Unarchive icon — the same box with an up arrow. */
+    _iconUnarchive() {
+      return `<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"><rect x="2" y="4" width="20" height="5" rx="1"/><path d="M4 9v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"/><polyline points="9 15 12 12 15 15"/><line x1="12" y1="12" x2="12" y2="18"/></svg>`;
+    },
+
     /** Show right-click context menu for a session item. */
     _showContextMenu(e, session) {
       Sessions._closeContextMenu();
       Sessions._closeActionsMenu();
 
       const iconFork = `<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"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>`;
+      const archived = !!session.archived_at;
 
       const menu = document.createElement("div");
       menu.className = "session-context-menu";
@@ -4099,6 +4242,10 @@ const Sessions = (() => {
           <span class="session-actions-menu-icon">${iconFork}</span>
           <span class="session-actions-menu-label">${escapeHtml(I18n.t("sessions.actions.fork"))}</span>
         </div>
+        <div class="session-actions-menu-item" data-action="${archived ? "unarchive" : "archive"}">
+          <span class="session-actions-menu-icon">${archived ? Sessions._iconUnarchive() : Sessions._iconArchive()}</span>
+          <span class="session-actions-menu-label">${escapeHtml(I18n.t(archived ? "sessions.actions.unarchive" : "sessions.actions.archive"))}</span>
+        </div>
       `;
 
       document.body.appendChild(menu);
@@ -4119,6 +4266,10 @@ const Sessions = (() => {
         Sessions._closeContextMenu();
         if (action === "fork") {
           await Sessions.fork(session.id);
+        } else if (action === "archive") {
+          await Sessions.setArchived(session.id, true);
+        } else if (action === "unarchive") {
+          await Sessions.setArchived(session.id, false);
         }
       });
 
@@ -4154,6 +4305,13 @@ const Sessions = (() => {
           <span class="session-actions-menu-label">${escapeHtml(pinLabel)}</span>
         </div>`;
 
+      const isArchived = !!session.archived_at;
+      const archiveItemHtml = `
+        <div class="session-actions-menu-item" data-action="${isArchived ? "unarchive" : "archive"}">
+          <span class="session-actions-menu-icon">${isArchived ? Sessions._iconUnarchive() : Sessions._iconArchive()}</span>
+          <span class="session-actions-menu-label">${escapeHtml(I18n.t(isArchived ? "sessions.actions.unarchive" : "sessions.actions.archive"))}</span>
+        </div>`;
+
       const removeFromProjectItemHtml = session.project_id ? `
         <div class="session-actions-menu-item" data-action="removeFromProject">
           <span class="session-actions-menu-icon">${iconRemoveFromProject}</span>
@@ -4209,6 +4367,8 @@ const Sessions = (() => {
             <span class="session-actions-submenu-label">${escapeHtml(I18n.t("sessions.moveToProject.newProject"))}</span>
           </div>
         </div>
+        <div class="session-actions-menu-divider"></div>
+        ${archiveItemHtml}
         <div class="session-actions-menu-item session-actions-menu-item--danger" data-action="delete">
           <span class="session-actions-menu-icon">${iconTrash}</span>
           <span class="session-actions-menu-label">${escapeHtml(I18n.t("sessions.actions.delete"))}</span>
@@ -4324,6 +4484,10 @@ const Sessions = (() => {
         } else if (action === "delete") {
           window.mobileCloseSidebar?.();
           await Sessions.deleteSession(session.id);
+        } else if (action === "archive") {
+          await Sessions.setArchived(session.id, true);
+        } else if (action === "unarchive") {
+          await Sessions.setArchived(session.id, false);
         }
       });
 
@@ -4383,6 +4547,7 @@ const Sessions = (() => {
           Sessions.remove(sessionId);
           Sessions.renderList();
           Projects.renderSection();
+          Trash.refreshIfShown();
           // If deleted session was active, switch to welcome
           if (sessionId === _activeId) {
             Router.navigate("welcome");
@@ -4395,6 +4560,60 @@ const Sessions = (() => {
       }
     },
 
+    /**
+     * Archive (`archived === true`) or unarchive a session. Archived chats leave
+     * the sidebar and every project list, and land on the Archived chats page.
+     */
+    async setArchived(sessionId, archived) {
+      const session = _sessions.find(s => s.id === sessionId) || { id: sessionId };
+      const name = session.name || String(sessionId).slice(0, 8);
+
+      if (archived) {
+        const confirmed = await Modal.confirm(I18n.t("archive.confirmArchive", { name }));
+        if (!confirmed) return false;
+      }
+
+      const res = archived
+        ? await Archive.archiveSession(session)
+        : await Archive.unarchive(session);
+
+      if (!res || !res.ok) {
+        Modal.toast(I18n.t("archive.actionFail", { msg: (res && res.error) || "" }), "error");
+        return false;
+      }
+
+      if (archived) {
+        // An archived chat can no longer be the active one.
+        if (sessionId === _activeId) Router.navigate("welcome");
+        Modal.toast(I18n.t("archive.archived", { name }), "success", {
+          action: {
+            label: I18n.t("archive.undo"),
+            onClick: async () => {
+              const back = await Archive.unarchive(session);
+              if (back && back.ok) {
+                Modal.toast(I18n.t("archive.unarchived", { name }), "success", {
+                  action: {
+                    label: I18n.t("archive.unarchivedAction"),
+                    onClick: () => Sessions.select(sessionId),
+                  },
+                });
+              } else {
+                Modal.toast(I18n.t("archive.actionFail", { msg: "" }), "error");
+              }
+            },
+          },
+        });
+      } else {
+        Modal.toast(I18n.t("archive.unarchived", { name }), "success", {
+          action: {
+            label: I18n.t("archive.unarchivedAction"),
+            onClick: () => Sessions.select(sessionId),
+          },
+        });
+      }
+      return true;
+    },
+
     updateInputBehavior: _updateInputBehavior,
 
     updateStatusBar(status) {
@@ -4410,7 +4629,7 @@ const Sessions = (() => {
       const inp = $("user-input");
       if (inp) {
         const mobile = window.innerWidth <= 768;
-        const key = status === "running"
+        const key = _hasPendingFeedback() ? "chat.input.placeholderFeedback" : status === "running"
           ? (mobile ? "chat.input.placeholderRunningMobile" : "chat.input.placeholderRunning")
           : (mobile ? "chat.input.placeholderMobile"        : "chat.input.placeholder");
         inp.setAttribute("data-i18n-placeholder", key);
@@ -4419,13 +4638,18 @@ const Sessions = (() => {
     },
 
     /**
-     * No-op: the chat header element (#chat-header) was removed. All session
-     * metadata (title, source, working dir, status) is now shown in the
-     * sidebar and the bottom #session-info-bar. Kept as a stub so existing
-     * call sites don't need to be updated.
+     * Render the active session's title in the top header, right of the
+     * sidebar divider (#header-session-title). Called on every session switch
+     * and on session_update so renames and freshly generated titles land
+     * immediately. Pass null to clear it — the header is shared by all views.
      */
-    updateChatHeader(_s) {
-      // intentionally empty
+    updateChatHeader(s) {
+      const el = $("header-session-title");
+      if (!el) return;
+      const title = s ? _sessionDisplayName(s).text : "";
+      el.textContent = title;
+      el.title = title;
+      el.hidden = !title;
     },
 
     /** Update the session info bar below the chat header with current session metadata. */
@@ -4435,10 +4659,10 @@ const Sessions = (() => {
       if (!s) {
         // 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 => {
+        ["sib-id", "sib-status", "sib-model", "sib-cost"].forEach(id => {
           const el = $(id); if (el) el.textContent = "";
         });
-        ["sib-dir-text", "sib-reasoning-text"].forEach(id => {
+        ["sib-dir-text", "sib-reasoning-text", "sib-mode-text"].forEach(id => {
           const el = $(id); if (el) el.textContent = "";
         });
         const sibIdEl = $("sib-id");
@@ -4453,7 +4677,7 @@ const Sessions = (() => {
       // Status dot + text — first
       const sibStatus = $("sib-status");
       if (sibStatus) {
-        const st = s.status || "idle";
+        const st = _hasPendingFeedback() ? "awaiting_feedback" : (s.status || "idle");
         const labelKey = `sib.status.${st}`;
         const label = I18n.t(labelKey);
         sibStatus.innerHTML = `<span class="sib-dot"></span>${escapeHtml(label === labelKey ? st : label)}`;
@@ -4495,16 +4719,28 @@ const Sessions = (() => {
         }
       }
 
-      // Permission mode — hide element and its separator if empty
+      // Permission mode — ordinary Web sessions default to confirm_all.
       const sibMode = $("sib-mode");
+      const sibModeText = $("sib-mode-text");
       const sibSepAfterMode = document.querySelector(".sib-sep-after-mode");
-      if (sibMode) {
-        sibMode.textContent = s.permission_mode || "";
-        sibMode.title = s.permission_mode ? I18n.t("sib.mode.tooltip") : "";
-        sibMode.style.display = s.permission_mode ? "" : "none";
+      if (sibMode && sibModeText) {
+        const mode = s.permission_mode || "confirm_all";
+        sibModeText.textContent = I18n.t(`sib.mode.${mode}`);
+        document.querySelectorAll("[data-permission-mode]").forEach(option => {
+          option.setAttribute("aria-checked", String(option.dataset.permissionMode === mode));
+        });
+        if (sibMode.dataset.sessionId !== s.id) {
+          $("sib-mode-menu").hidden = true;
+          sibMode.classList.remove("is-open");
+          sibMode.setAttribute("aria-expanded", "false");
+        }
+        sibMode.dataset.sessionId = s.id;
+        sibMode.disabled = false;
+        sibMode.title = I18n.t("sib.mode.tooltip");
+        sibMode.style.display = "";
       }
       if (sibSepAfterMode) {
-        sibSepAfterMode.style.display = s.permission_mode ? "" : "none";
+        sibSepAfterMode.style.display = "";
       }
 
       // Model — hide wrap entirely if empty
@@ -4544,7 +4780,6 @@ const Sessions = (() => {
 
       const sibReasoning = $("sib-reasoning");
       const sibReasoningWrap = $("sib-reasoning-wrap");
-      const sibSepAfterReasoning = document.querySelector(".sib-sep-after-reasoning");
       if (sibReasoning) {
         const eff = (s.reasoning_effort || "off").toLowerCase();
         const sibReasoningText = $("sib-reasoning-text");
@@ -4553,7 +4788,6 @@ const Sessions = (() => {
         sibReasoning.dataset.reasoningEffort = eff;
       }
       if (sibReasoningWrap) sibReasoningWrap.style.display = "";
-      if (sibSepAfterReasoning) sibSepAfterReasoning.style.display = "";
 
       // Latency signal — read from s.latest_latency (populated by:
       //   - HTTP /api/sessions → session_registry#list (from agent.latest_latency)
@@ -4562,13 +4796,6 @@ const Sessions = (() => {
       // pre-feature sessions that have never made an LLM call this run).
       this._renderSignal(s.latest_latency);
 
-      // Tasks
-      const sibTasks = $("sib-tasks");
-      if (sibTasks) {
-        sibTasks.textContent = I18n.t("sessions.metaTasks", { n: s.total_tasks || 0 });
-        sibTasks.title = I18n.t("sib.tasks.tooltip");
-      }
-
       // Cost — show N/A when pricing is unknown (estimated)
       const sibCost = $("sib-cost");
       if (sibCost) {
@@ -4919,7 +5146,17 @@ const Sessions = (() => {
       }
     },
 
+    archiveErrors() {
+      RenderTarget.outer()?.querySelectorAll(".msg-error:not(.msg-history-error)").forEach(el => {
+        el.classList.add("msg-history-error");
+        el.querySelectorAll(".msg-error-actions, .retry-btn, .error-action-btn").forEach(action => action.remove());
+        const credit = el.querySelector(".error-credit-message");
+        if (credit) credit.textContent = I18n.t("error.insufficient_credit.history");
+      });
+    },
+
     appendMsg(type, html, { time } = {}) {
+      if (type === "user") Sessions.archiveErrors();
       // Starting a new assistant/user/info message: close any open tool group
       if (type !== "tool") Sessions.collapseToolGroup();
 
@@ -4927,7 +5164,7 @@ const Sessions = (() => {
 
       // For error messages: remove any existing error messages first to avoid duplicates
       if (type === "error") {
-        messages.querySelectorAll(".msg-error").forEach(el => el.remove());
+        messages.querySelectorAll(".msg-error:not(.msg-history-error)").forEach(el => el.remove());
       }
 
       const el = document.createElement("div");
@@ -4950,8 +5187,8 @@ const Sessions = (() => {
         const wrap = document.createElement("div");
         wrap.className = "msg-user-wrap";
         wrap.appendChild(el);
-        _appendUserActionBar(el, wrap);
-        if (time) _appendMsgTime(wrap, time);
+        const bar = _appendUserActionBar(el, wrap);
+        if (time) _appendMsgTime(bar, time);
         messages.appendChild(wrap);
         _refreshEditButtons(messages);
       } else {
@@ -5005,25 +5242,38 @@ const Sessions = (() => {
       _scrollToBottomIfNeeded(messages);
     },
 
+    updateFeedbackCountdown(ev) {
+      const previous = _feedbackCountdowns.get(ev.session_id);
+      if (ev.resolved) {
+        if (ev.request_id && previous?.request_id !== ev.request_id) return;
+        _feedbackCountdowns.delete(ev.session_id);
+        if (ev.session_id === Sessions.activeId && ev.resolution === "timeout") {
+          document.querySelectorAll(".feedback-card:not(.feedback-card--submitted)").forEach(card => {
+            card.classList.add("feedback-card--submitted");
+            card.querySelector(".feedback-status").textContent = I18n.t("chat.feedback_timeout");
+            card.querySelectorAll("button, input").forEach(el => { el.disabled = true; });
+          });
+        }
+      } else {
+        _feedbackCountdowns.set(ev.session_id, ev);
+        if (ev.session_id === Sessions.activeId && Composer.text($("user-input")).trim()) {
+          _interveneFeedbackCountdown();
+        }
+      }
+      _refreshFeedbackStatus();
+    },
+
     // Display an ask_user UI card with clickable options.
-    // Called when the agent needs user input to continue.
     showFeedbackRequest(question, context, options, questions) {
       Sessions.collapseToolGroup();
       const messages = RenderTarget.current();
       const list = _normalizeFeedbackQuestions(questions, question, options);
 
-      // Nothing selectable → plain assistant bubble (card UI adds no value without choices)
-      if (!_feedbackNeedsCard(list)) {
-        const text = _feedbackPlainText(list, context);
-        if (!text) return;
-        // Pass raw markdown; appendMsg renders it via _renderMarkdown and
-        // also stashes it on dataset.raw for the copy button.
-        Sessions.appendMsg("assistant", text);
-        return;
-      }
+      if (list.length === 0) return;
 
       const card = _buildFeedbackCard(list, context, false);
       messages.appendChild(card);
+      _refreshFeedbackStatus();
       _scrollToBottomIfNeeded(messages);
     },
 
@@ -5042,8 +5292,6 @@ const Sessions = (() => {
     _sessionProgress: {},
     _sessionTodos: {},
     _todoClearTimer: null,
-    // Collapsed state of the todo panel — persisted across reloads via localStorage.
-    _todoCollapsed: (typeof localStorage !== "undefined" && localStorage.getItem("clacky-todo-collapsed")) === "1",
 
     _getProgressState(id) {
       if (!id) return null;
@@ -5286,14 +5534,9 @@ const Sessions = (() => {
     },
 
     // updateTodos(todos) — called from ws-dispatcher on "todo_update".
-    // Stores the latest todo snapshot per session and re-renders the panel
-    // for the active session. Mirrors the CLI TodoArea behaviour.
-    //
-    // UX detail: if the panel was previously collapsed by the user but the
-    // new snapshot contains pending (incomplete) todos, we auto-expand so
-    // the user actually notices the new work.  We do NOT touch localStorage
-    // here — the user's explicit collapse choice is still remembered and
-    // will be re-applied the next time they collapse the panel manually.
+    // Stores the latest todo snapshot per session and re-renders the compact
+    // session-bar entry for the active session. Mirrors the CLI TodoArea
+    // behaviour while keeping the conversation height unchanged.
     updateTodos(todos) {
       const sid = _activeId;
       if (!sid) return;
@@ -5329,72 +5572,134 @@ const Sessions = (() => {
       }
 
       Sessions._sessionTodos[sid] = next;
-
-      // Auto-expand when there is new pending work that the user hasn't seen.
-      // Trigger only when transitioning from "no pending" → "has pending"
-      // so we don't fight the user if they intentionally collapsed mid-task.
-      const prevHasPending = prev.some(t => t && t.status !== "completed");
-      const nextHasPending = next.some(t => t && t.status !== "completed");
-      if (!prevHasPending && nextHasPending && Sessions._todoCollapsed) {
-        Sessions._todoCollapsed = false;
-        // Persist so a page reload doesn't bring the collapsed state back
-        // and hide the new tasks again.
-        try { localStorage.setItem("clacky-todo-collapsed", "0"); } catch (e) {}
-      }
-
       Sessions._renderTodoPanel();
     },
 
-    // Render (or hide) the #todo-panel based on the active session's todos.
-    // Pure DOM rebuild on each update — todo lists are tiny so this is cheap
-    // and avoids diffing complexity.
+    // Render the stable session-bar todo entry. The icon always remains in
+    // place; progress details expand only while the active session has todos.
     _renderTodoPanel() {
       const panel = document.getElementById("todo-panel");
-      if (!panel) return;
+      const trigger = document.getElementById("todo-trigger");
+      const close = document.getElementById("todo-close");
+      const countEl = document.getElementById("todo-count");
+      const summaryEl = document.getElementById("todo-summary");
+      const listEl = document.getElementById("todo-list");
+      if (!panel || !trigger || !close || !countEl || !summaryEl || !listEl) return;
+
       const sid = _activeId;
       const todos = (sid && Sessions._sessionTodos[sid]) || [];
+      const hasTodos = !!sid && todos.length > 0;
+      const completed = todos.filter(t => t && t.status === "completed").length;
+      const total = todos.length;
 
-      // No active session, no todos, or single todo → hide.
-      if (!sid || todos.length <= 1) {
-        panel.style.display = "none";
-        panel.innerHTML = "";
+      panel.classList.toggle("has-todos", hasTodos);
+      trigger.disabled = !hasTodos;
+      close.setAttribute("aria-label", I18n.t("chat.todo.close"));
+
+      if (!hasTodos) {
+        countEl.textContent = "";
+        summaryEl.textContent = "";
+        listEl.textContent = "";
+        trigger.style.width = "";
+        const emptyLabel = I18n.t("chat.todo.empty");
+        trigger.title = emptyLabel;
+        trigger.setAttribute("aria-label", emptyLabel);
+        Sessions._setTodoPopoverOpen(false);
         return;
       }
 
-      const completed = todos.filter(t => t && t.status === "completed").length;
-      const total = todos.length;
-      const title = (typeof I18n !== "undefined" && I18n.t)
-        ? (I18n.t("chat.todo.title") || "Tasks")
-        : "Tasks";
+      const count = `${completed}/${total}`;
+      const progress = I18n.t("chat.todo.progress", { completed, total });
+      countEl.textContent = count;
+      summaryEl.textContent = progress;
+      trigger.title = `${I18n.t("chat.todo.open")} · ${progress}`;
+      trigger.setAttribute("aria-label", trigger.title);
+      // Keep the empty slot genuinely compact, then animate to the exact
+      // width needed by the current count instead of reserving a wide box.
+      trigger.style.width = `${Math.min(84, 40 + count.length * 7)}px`;
 
-      const items = todos.map(t => {
+      listEl.innerHTML = todos.map(t => {
         const done = t && t.status === "completed";
         const cls = done ? "todo-item done" : "todo-item";
         const text = escapeHtml(String((t && t.task) || ""));
         const icon = done
           ? `<svg class="todo-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" fill="currentColor" stroke="currentColor" stroke-width="1"/><path d="M5 8.2l2 2 4-4.4" stroke="var(--color-text-inverse, #fff)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>`
           : `<svg class="todo-icon" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/></svg>`;
-        return `<div class="${cls}">${icon}<span class="todo-text">${text}</span></div>`;
+        return `<div class="${cls}">${icon}<span class="todo-text"><span class="todo-text__content">${text}</span></span></div>`;
       }).join("");
-
-      const collapsedCls = Sessions._todoCollapsed ? " collapsed" : "";
-      panel.innerHTML =
-        `<div class="todo-header"><span>${title}</span><span class="todo-count">${completed}/${total}</span><svg class="todo-toggle" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6l4 4 4-4"/></svg></div>` +
-        `<div class="todo-list">${items}</div>`;
-      panel.className = "todo-panel" + collapsedCls;
-      panel.style.display = "block";
-
-      const header = panel.querySelector(".todo-header");
-      if (header) {
-        header.title = Sessions._todoCollapsed ? "Click to expand" : "Click to collapse";
-        header.addEventListener("click", () => {
-          Sessions._todoCollapsed = !Sessions._todoCollapsed;
-          try { localStorage.setItem("clacky-todo-collapsed", Sessions._todoCollapsed ? "1" : "0"); } catch (e) {}
-          Sessions._renderTodoPanel();
+      listEl.querySelectorAll(".todo-item").forEach(item => {
+        _setupHorizontalTextOverflow(item, {
+          viewportSelector: ".todo-text",
+          contentSelector: ".todo-text__content",
+          activeClass: "todo-text-scrolling",
+          distanceProperty: "--todo-text-scroll-distance",
+          durationProperty: "--todo-text-scroll-duration",
+          revealPadding: 12,
+          measureDelay: 120,
         });
+      });
+      if (trigger.getAttribute("aria-expanded") === "true") {
+        Sessions._positionTodoPopover();
       }
     },
 
+    _positionTodoPopover() {
+      const trigger = document.getElementById("todo-trigger");
+      const popover = document.getElementById("todo-popover");
+      if (!trigger || !popover || popover.hidden) return;
+
+      const triggerRect = trigger.getBoundingClientRect();
+      const popoverRect = popover.getBoundingClientRect();
+      const margin = 12;
+      const idealLeft = triggerRect.left + triggerRect.width / 2;
+      const minLeft = margin + popoverRect.width / 2;
+      const maxLeft = window.innerWidth - margin - popoverRect.width / 2;
+      popover.style.left = `${Math.max(minLeft, Math.min(idealLeft, maxLeft))}px`;
+      popover.style.top = `${triggerRect.top - 6}px`;
+    },
+
+    _setTodoPopoverOpen(open) {
+      const panel = document.getElementById("todo-panel");
+      const trigger = document.getElementById("todo-trigger");
+      const popover = document.getElementById("todo-popover");
+      if (!panel || !trigger || !popover) return;
+
+      const shouldOpen = !!open && panel.classList.contains("has-todos");
+      popover.hidden = !shouldOpen;
+      panel.classList.toggle("is-open", shouldOpen);
+      trigger.setAttribute("aria-expanded", String(shouldOpen));
+      if (shouldOpen) Sessions._positionTodoPopover();
+    },
+
+    _initTodoPanel() {
+      const panel = document.getElementById("todo-panel");
+      const trigger = document.getElementById("todo-trigger");
+      const close = document.getElementById("todo-close");
+      const bar = document.getElementById("session-info-bar");
+      if (!panel || !trigger || !close) return;
+
+      trigger.addEventListener("click", () => {
+        if (trigger.disabled) return;
+        Sessions._setTodoPopoverOpen(trigger.getAttribute("aria-expanded") !== "true");
+      });
+      close.addEventListener("click", () => {
+        Sessions._setTodoPopoverOpen(false);
+        trigger.focus();
+      });
+      document.addEventListener("click", e => {
+        if (!panel.contains(e.target)) Sessions._setTodoPopoverOpen(false);
+      });
+      document.addEventListener("keydown", e => {
+        if (e.key !== "Escape" || trigger.getAttribute("aria-expanded") !== "true") return;
+        Sessions._setTodoPopoverOpen(false);
+        trigger.focus();
+      });
+      window.addEventListener("resize", () => Sessions._positionTodoPopover());
+      if (bar) bar.addEventListener("scroll", () => Sessions._positionTodoPopover(), { passive: true });
+
+      Sessions._renderTodoPanel();
+    },
+
     // Delete all progress state for a session (used when session is removed).
     _deleteProgressState(id) {
       Sessions._detachProgressUI(id);
@@ -5641,6 +5946,7 @@ const Sessions = (() => {
         subInfo,
         onSelect: (m) => _switchModel(sessionId, m.id, m.model),
         onSwitchSubModel: (name, displayName) => _switchSubModel(sessionId, name, displayName),
+        onSwitchRowSubModel: (m, name, displayName) => _switchModelAndSubModel(sessionId, m, name, displayName),
         onBenchmark: () => _benchmarkSession(sessionId),
         onAddModel: _goAddModel,
         onConfigureMedia: _goConfigureMedia,
@@ -5713,21 +6019,42 @@ const Sessions = (() => {
     }
   }
 
+  // A variant picked on a row that is not the session's current model: the
+  // sub-model is pinned under the card, and the backend validates the name
+  // against the card's provider, so the session has to run on that model first.
+  async function _switchModelAndSubModel(sessionId, m, modelName, displayName) {
+    _closeModelDropdown();
+
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/model`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model_id: m.id })
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Unknown error");
+    } catch (e) {
+      console.error("Failed to switch model and sub-model:", e);
+      alert("Failed to switch model: " + e.message);
+      return;
+    }
+
+    await _switchSubModel(sessionId, modelName, displayName);
+  }
+
   // The picker only lists models that are already configured, so this is the
   // way out when the wanted one is missing.
   function _goAddModel() {
     _closeModelDropdown();
-    if (typeof Router !== "undefined") Router.navigate("settings");
+    if (typeof Router !== "undefined") Router.navigate("settings", { tab: "models" });
   }
 
   // Navigate to media config.
   function _goConfigureMedia() {
     _closeModelDropdown();
-    if (typeof Router !== "undefined") Router.navigate("settings");
-    setTimeout(() => {
-      const sec = document.getElementById("media-section");
-      if (sec) sec.scrollIntoView({ behavior: "smooth", block: "start" });
-    }, 200);
+    if (typeof Router !== "undefined") {
+      Router.navigate("settings", { tab: "models", section: "media-section" });
+    }
   }
 })();
 
@@ -5768,13 +6095,15 @@ const Sessions = (() => {
         return (s && s !== key) ? s : fallback;
       };
 
-      // 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.
+      // Absolute browsing belongs to the session-independent directory API:
+      // it remains usable even when a session's bound working directory was
+      // deleted. Relative browsing can still use the session-scoped files API.
       const sessionLess = !sessionId;
       const mobileLayout = window.matchMedia("(max-width: 768px)");
 
       let currentPath = currentDir;
-      let selectedPath = currentDir;
+      let selectedPath = null;
+      let currentPathExists = false;
       let currentHasChildDirs = false;
       let rootDir = ""; // absolute path of the session's working directory
       let homeDir = ""; // user home, used as a quick preset
@@ -5787,7 +6116,7 @@ const Sessions = (() => {
 
       // Fetch directory entries from API, returns dirs with absolute paths
       async function fetchDirs(relPath, absolute = false) {
-        if (sessionLess) {
+        if (sessionLess || absolute) {
           // /api/dirs already returns absolute paths and operates in absolute mode.
           let url = `/api/dirs${relPath ? `?path=${encodeURIComponent(relPath)}` : ""}`;
           if (showHidden) url += `${url.includes("?") ? "&" : "?"}show_hidden=true`;
@@ -5866,7 +6195,7 @@ const Sessions = (() => {
             clickTimer = null;
             listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
             row.classList.add("selected");
-            selectedPath = entry.absPath;
+            setSelectedPath(entry.absPath);
           }, 200);
         });
 
@@ -6000,6 +6329,7 @@ const Sessions = (() => {
       const newFolderBtn = document.createElement("button");
       newFolderBtn.className = "btn btn-secondary btn-sm dp-newfolder-btn";
       newFolderBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg><span>${t("sib.dir.newFolder", "新建文件夹")}</span>`;
+      newFolderBtn.disabled = true;
 
       const footerActions = document.createElement("div");
       footerActions.className = "dp-footer-actions";
@@ -6012,7 +6342,12 @@ const Sessions = (() => {
       const confirmButton = document.createElement("button");
       confirmButton.className = "btn btn-primary";
       confirmButton.textContent = t("sib.dir.confirm", "确认");
-      confirmButton.onclick = () => { overlay.remove(); resolve(selectedPath || null); };
+      confirmButton.disabled = true;
+      confirmButton.onclick = () => {
+        if (!selectedPath) return;
+        overlay.remove();
+        resolve(selectedPath);
+      };
 
       footerActions.appendChild(cancelButton);
       footerActions.appendChild(confirmButton);
@@ -6034,6 +6369,11 @@ const Sessions = (() => {
       let breadcrumbMenuAnchor = null;
       let breadcrumbMenuRequest = 0;
 
+      function setSelectedPath(path) {
+        selectedPath = path || null;
+        confirmButton.disabled = !selectedPath;
+      }
+
       function refreshNavBtns() {
         backBtn.disabled = historyIndex <= 0;
         fwdBtn.disabled  = historyIndex >= history.length - 1;
@@ -6152,7 +6492,7 @@ const Sessions = (() => {
       function refreshFavoriteButton() {
         const path = normalizeFavoritePath(currentPath);
         const isFavorite = directoryFavorites.includes(path);
-        favoriteBtn.disabled = !currentPathLoaded;
+        favoriteBtn.disabled = !currentPathLoaded || !currentPathExists;
         favoriteBtn.classList.toggle("active", isFavorite);
         favoriteBtn.setAttribute("aria-pressed", isFavorite ? "true" : "false");
         favoriteBtn.title = t(
@@ -6355,9 +6695,12 @@ const Sessions = (() => {
         closeBreadcrumbMenu();
         if (pushHistory && historyIndex >= 0
           && comparablePath(currentPath) === comparablePath(dirPath)) {
+          if (currentPathExists) setSelectedPath(currentPath);
           return true;
         }
 
+        setSelectedPath(null);
+        newFolderBtn.disabled = 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"));
@@ -6385,24 +6728,33 @@ const Sessions = (() => {
               : rootDir;
           }
 
+          // A missing requested path may be resolved internally by /api/dirs so
+          // it can still return quick-access places. Keep showing the path that
+          // belongs to the session instead of silently replacing it with that
+          // internal fallback directory.
+          const displayPath = exactMatch ? effectivePath : dirPath;
           const isNewHistoryEntry = historyIndex < 0
-            || comparablePath(history[historyIndex]) !== comparablePath(effectivePath);
+            || comparablePath(history[historyIndex]) !== comparablePath(displayPath);
           if (pushHistory && isNewHistoryEntry) {
             history.splice(historyIndex + 1);
-            history.push(effectivePath);
+            history.push(displayPath);
             historyIndex = history.length - 1;
           }
           refreshNavBtns();
 
-          currentPath = effectivePath;
-          selectedPath = effectivePath;
-          currentHasChildDirs = dirs.length > 0;
+          currentPath = displayPath;
+          currentPathExists = exactMatch;
+          setSelectedPath(exactMatch ? effectivePath : null);
+          currentHasChildDirs = exactMatch && dirs.length > 0;
           currentPathLoaded = true;
-          refreshBreadcrumb(effectivePath);
+          newFolderBtn.disabled = !exactMatch;
+          refreshBreadcrumb(displayPath);
           refreshFavoriteButton();
           refreshSidebarActive();
           listContainer.innerHTML = "";
-          if (dirs.length === 0) {
+          if (!exactMatch) {
+            listContainer.innerHTML = `<div class="dp-empty dp-missing">${t("sib.dir.missing", "This folder no longer exists. Please select a new working directory.")}</div>`;
+          } else if (dirs.length === 0) {
             listContainer.innerHTML = `<div class="dp-empty">${t("sib.dir.empty", "空目录")}</div>`;
           } else {
             const frag = document.createDocumentFragment();
@@ -6521,7 +6873,7 @@ const Sessions = (() => {
               placeholder.replaceWith(realNode);
               listContainer.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
               realNode._dpRow.classList.add("selected");
-              selectedPath = data.path;
+              setSelectedPath(data.path);
               currentHasChildDirs = true;
               refreshBreadcrumb(currentPath);
             } catch (err) {
@@ -6565,21 +6917,10 @@ const Sessions = (() => {
       }
 
       // ── Initial load ───────────────────────────────────────────────────
-      // session-less: browse absolute paths from currentDir (or "/" fallback)
-      // sessionful: load relative root first so rootDir is populated, then
-      //             navigate to currentDir if it's provided.
-      if (sessionLess) {
-        const startDir = currentDir || "/";
-        navigateTo(startDir, true);
-      } else {
-        // 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("/"));
-          }
-        });
-      }
+      // Open the requested path directly. For a missing path, /api/dirs still
+      // supplies quick-access places while navigateTo keeps the original path
+      // visible and waits for the user to choose a replacement.
+      navigateTo(currentDir || "/", true);
 
       overlay.addEventListener("keydown", (e) => {
         if (e.key !== "Escape") return;
@@ -6890,6 +7231,7 @@ const Sessions = (() => {
 
 document.addEventListener("langchange", () => {
   if (Sessions._lastSession) Sessions.updateInfoBar(Sessions._lastSession);
+  Sessions._renderTodoPanel();
 });
 
 document.addEventListener("currencychange", () => {