openclacky 1.5.20 → 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)) {
@@ -980,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
@@ -1012,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.
@@ -1071,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}"` +
@@ -1085,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;
   }
 
@@ -1129,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"));
@@ -1136,7 +1147,7 @@ const Sessions = (() => {
     return true;
   }
 
-  function _wireFeedbackCard(card, list, instant, stepped) {
+  function _wireFeedbackCard(card, list, stepped) {
     let step = 0;
 
     const showStep = (target) => {
@@ -1177,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"));
@@ -1382,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();
@@ -1420,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");
@@ -2033,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.
@@ -2040,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;
       }
@@ -2172,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;
       }
@@ -2348,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();
@@ -2450,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.
@@ -2468,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) {
@@ -2520,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() {
@@ -2896,14 +2953,49 @@ 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*/, "");
+  }
+
+  // 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
@@ -3053,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 = `
@@ -3316,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) &&
@@ -3376,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;
@@ -3475,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);
@@ -3567,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);
@@ -3592,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);
@@ -3623,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;
@@ -3633,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) {
@@ -4006,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 ───────
@@ -4458,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");
@@ -4539,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);
@@ -4569,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-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");
@@ -4587,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)}`;
@@ -4629,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
@@ -4678,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");
@@ -4687,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)
@@ -5087,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 {
@@ -5142,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);
     },