openclacky 1.2.10 → 1.2.13

data/lib/clacky/web/sessions.js

@@ -19,14 +19,29 @@ const Sessions = (() => {
   const _sessions          = [];  // [{ id, name, status, total_tasks, total_cost }]
   const _historyState      = {};  // { [session_id]: { hasMore, oldestCreatedAt, loading, loaded } }
   const _renderedCreatedAt = {};  // { [session_id]: Set<number> } — dedup by created_at
+  const _drafts            = new Map();  // { [session_id]: composer textarea draft }
   let   _activeId          = null;
   let   _hasMore           = false;   // unified pagination: are there older sessions to load?
   let   _loadingMore       = false;
   // Search state
   const _filter            = { q: "", date: "", type: "" };  // committed filter (applied to server)
   let   _searchOpen        = false;   // is the search panel visible?
+  // Active search result split when _filter.q is non-empty:
+  // { nameIds: Set<id>, contentIds: Set<id>, contentLoaded: bool }
+  let   _searchSplit       = null;
+  let   _searchToken       = 0;       // monotonic counter; in-flight requests check against this
   let   _cronView          = false;  // are we in the cron sub-view?
   let   _cronCount         = 0;      // total cron sessions from server
+  // ── Cron sub-view independent pagination (commit 2) ──────────────────────
+  // The folded cron sub-view paginates *independently* of the outer list so
+  // that "Load more" inside it never advances the outer list's cursor, and so
+  // all cron sessions can be loaded even when they're sparse across the mixed
+  // outer pages. Cron rows fetched here are pushed into the shared `_sessions`
+  // array (with dedup), so WS updates / patch / remove keep working unchanged;
+  // we only track a separate cursor + hasMore/loading flags for the sub-view.
+  let   _cronBefore        = null;   // cursor: oldest cron created_at loaded into the sub-view
+  let   _cronHasMore       = false;  // are there older cron sessions to load?
+  let   _cronLoadingMore   = false;
   let   _pendingRunTaskId  = null;  // session_id waiting to send "run_task" after subscribe
   let   _pendingMessage    = null;  // { session_id, content } — slash command to send after subscribe
   // Buffer for tool_stdout lines that arrive before history has finished rendering.
@@ -215,7 +230,7 @@ const Sessions = (() => {
 
   function _restoreMessages(id) {
     // Clear the pane and dedup state; history will be re-fetched from API.
-    $("messages").innerHTML = "";
+    RenderTarget.outer().innerHTML = "";
     delete _renderedCreatedAt[id];
     if (_historyState[id]) {
       _historyState[id].oldestCreatedAt = null;
@@ -305,7 +320,7 @@ const Sessions = (() => {
   }
 
   function _updateEmptyHint() {
-    const messages = $("messages");
+    const messages = RenderTarget.outer();
     if (!messages) return;
     // Check if there's any real content besides the hint itself
     const hasReal = Array.from(messages.children).some(
@@ -329,7 +344,7 @@ const Sessions = (() => {
   }
 
   function _initEmptyHint() {
-    const messages = $("messages");
+    const messages = RenderTarget.outer();
     if (!messages) return;
     // Re-evaluate whenever children change (append/insertBefore/innerHTML="")
     const observer = new MutationObserver(() => _updateEmptyHint());
@@ -345,7 +360,7 @@ const Sessions = (() => {
 
   function _initNewMessageBanner() {
     const banner = $("new-message-banner");
-    const messages = $("messages");
+    const messages = RenderTarget.outer();
     if (!banner || !messages) return;
     
     // Click to scroll to bottom
@@ -520,7 +535,8 @@ const Sessions = (() => {
   }
 
   // Compress an image File/Blob to a data URL within MAX_IMAGE_BYTES_SEND.
-  // Strategy: scale down to MAX_IMAGE_LONG_EDGE, then reduce JPEG quality until small enough.
+  // PNG: keep as PNG to preserve alpha/transparency; scale down if too large.
+  // Other formats (JPEG/GIF/WEBP): scale down, then reduce JPEG quality until small enough.
   // GIF is not compressible via Canvas — rendered as JPEG (LLMs only see first frame anyway).
   function _compressImage(file) {
     return new Promise((resolve, reject) => {
@@ -544,14 +560,32 @@ const Sessions = (() => {
           const ctx = canvas.getContext("2d");
           ctx.drawImage(img, 0, 0, width, height);
 
-          // Try decreasing quality until under limit
-          let quality = 0.85;
-          let dataUrl = canvas.toDataURL("image/jpeg", quality);
-          while (dataUrl.length * 0.75 > MAX_IMAGE_BYTES_SEND && quality > 0.2) {
-            quality -= 0.1;
-            dataUrl = canvas.toDataURL("image/jpeg", quality);
+          // PNG: keep as PNG to preserve alpha/transparency.
+          // Other formats (JPEG/GIF/WEBP): convert to JPEG (no alpha needed).
+          const isPNG = file.type === "image/png";
+          if (isPNG) {
+            let dataUrl = canvas.toDataURL("image/png");
+            // If PNG is still too large, scale down further
+            let scale = 0.9;
+            while (dataUrl.length * 0.75 > MAX_IMAGE_BYTES_SEND && scale > 0.3) {
+              const sw = Math.round(width * scale);
+              const sh = Math.round(height * scale);
+              canvas.width  = sw;
+              canvas.height = sh;
+              ctx.drawImage(img, 0, 0, sw, sh);
+              dataUrl = canvas.toDataURL("image/png");
+              scale -= 0.1;
+            }
+            resolve(dataUrl);
+          } else {
+            let quality = 0.85;
+            let dataUrl = canvas.toDataURL("image/jpeg", quality);
+            while (dataUrl.length * 0.75 > MAX_IMAGE_BYTES_SEND && quality > 0.2) {
+              quality -= 0.1;
+              dataUrl = canvas.toDataURL("image/jpeg", quality);
+            }
+            resolve(dataUrl);
           }
-          resolve(dataUrl);
         };
         img.src = e.target.result;
       };
@@ -574,7 +608,7 @@ const Sessions = (() => {
 
     _compressImage(file)
       .then(dataUrl => {
-        _pendingImages.push({ dataUrl, name: displayName, mimeType: "image/jpeg", seq });
+        _pendingImages.push({ dataUrl, name: displayName, mimeType: file.type === "image/png" ? "image/png" : "image/jpeg", seq });
         _renderAttachmentPreviews();
       })
       .catch(err => alert(`Image processing failed: ${err.message}`));
@@ -733,6 +767,9 @@ const Sessions = (() => {
       }).join(" ");
       bubbleHtml = badges + (bubbleHtml ? "<br>" + bubbleHtml : "");
     }
+    if (typeof window._closeAllPhases === "function") {
+      window._closeAllPhases("incomplete");
+    }
     Sessions.appendMsg("user", bubbleHtml, { time: new Date() });
 
     // Merge images and files into unified files array for WS payload.
@@ -767,6 +804,7 @@ const Sessions = (() => {
 
     input.value        = "";
     input.style.height = "auto";
+    _drafts.delete(Sessions.activeId);
     setTimeout(() => { _sending = false; }, 300);
   }
 
@@ -837,13 +875,13 @@ const Sessions = (() => {
       }
     });
 
-    // Enter key → commit search (fires whichever input has focus)
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" && e.target && e.target.id === "session-search-q") {
-        e.preventDefault();
-        Sessions.commitSearch();
-      }
-    });
+    // Enter key → commit search.
+    // Bound on the input directly so IME.bindEnter can attach compositionend
+    // to the input itself (Safari needs the timestamp to suppress fake Enters).
+    const searchInput = document.getElementById("session-search-q");
+    if (searchInput) {
+      IME.bindEnter(searchInput, () => Sessions.commitSearch());
+    }
 
     // Inline ✕ button — clear the q input and re-fetch
     document.addEventListener("click", (e) => {
@@ -898,8 +936,8 @@ const Sessions = (() => {
   //     but kept here in case some brand / template still renders it).
   function _initMessageHistory() {
     // Infinite-scroll older history when the user reaches the top.
-    document.getElementById("messages").addEventListener("scroll", () => {
-      const messages = document.getElementById("messages");
+    RenderTarget.outer().addEventListener("scroll", (e) => {
+      const messages = e.currentTarget;
       if (messages.scrollTop < 80 && Sessions.activeId && Sessions.hasMoreHistory(Sessions.activeId)) {
         Sessions.loadMoreHistory(Sessions.activeId);
       }
@@ -933,25 +971,133 @@ const Sessions = (() => {
     const item = document.createElement("div");
     item.className = "tool-item";
 
-    // Use backend-provided summary when available, fall back to client-side summarise
+    const argsJson = _formatToolArgs(args);
+    if (argsJson) item.dataset.argsJson = argsJson;
+    if (name) item.dataset.toolName = String(name);
+
     const argSummary = summary || _summariseArgs(name, args);
 
-    // When a structured summary is available, show it as the primary label (no redundant tool name).
-    // Otherwise show the raw tool name + arg summary as before.
     const label = summary
       ? `<span class="tool-item-name">⚙ ${escapeHtml(summary)}</span>`
       : `<span class="tool-item-name">⚙ ${escapeHtml(name)}</span>` +
         (argSummary ? `<span class="tool-item-arg">${escapeHtml(argSummary)}</span>` : "");
 
+    const expandable = !!argsJson;
+    const headerCls = expandable ? "tool-item-header tool-item-expandable" : "tool-item-header";
+
     item.innerHTML =
-      `<div class="tool-item-header">` +
+      `<div class="${headerCls}">` +
         label +
         `<span class="tool-item-status running">…</span>` +
       `</div>` +
+      `<div class="tool-item-details" style="display:none"></div>` +
+      `<div class="tool-item-diff" style="display:none"></div>` +
       `<pre class="tool-item-stdout" style="display:none"></pre>`;
+    _ensureCopyDelegation();
     return item;
   }
 
+  function _lineDiff(oldText, newText) {
+    const a = String(oldText || "").split("\n");
+    const b = String(newText || "").split("\n");
+    const m = a.length, n = b.length;
+    const lcs = Array.from({ length: m + 1 }, () => new Uint32Array(n + 1));
+    for (let i = m - 1; i >= 0; i--) {
+      for (let j = n - 1; j >= 0; j--) {
+        lcs[i][j] = a[i] === b[j] ? lcs[i+1][j+1] + 1 : Math.max(lcs[i+1][j], lcs[i][j+1]);
+      }
+    }
+    const ops = [];
+    let i = 0, j = 0;
+    while (i < m && j < n) {
+      if (a[i] === b[j]) { ops.push({ kind: "ctx", text: a[i] }); i++; j++; }
+      else if (lcs[i+1][j] >= lcs[i][j+1]) { ops.push({ kind: "del", text: a[i] }); i++; }
+      else { ops.push({ kind: "add", text: b[j] }); j++; }
+    }
+    while (i < m) { ops.push({ kind: "del", text: a[i++] }); }
+    while (j < n) { ops.push({ kind: "add", text: b[j++] }); }
+    return ops;
+  }
+
+  function _trimDiffContext(ops, ctxLines = 3) {
+    const keep = new Array(ops.length).fill(false);
+    for (let i = 0; i < ops.length; i++) {
+      if (ops[i].kind !== "ctx") {
+        for (let k = Math.max(0, i - ctxLines); k <= Math.min(ops.length - 1, i + ctxLines); k++) keep[k] = true;
+      }
+    }
+    const out = [];
+    let skipped = 0;
+    for (let i = 0; i < ops.length; i++) {
+      if (keep[i]) {
+        if (skipped > 0) { out.push({ kind: "hunk", text: `@@ ${skipped} unchanged lines @@` }); skipped = 0; }
+        out.push(ops[i]);
+      } else {
+        skipped++;
+      }
+    }
+    return out;
+  }
+
+  function _renderEditWriteDiff(item, name, args) {
+    if (!item || !args || typeof args !== "object") return;
+    let oldText = "", newText = "";
+    if (name === "edit") {
+      oldText = args.old_string || args["old_string"] || "";
+      newText = args.new_string || args["new_string"] || "";
+    } else if (name === "write") {
+      oldText = "";
+      newText = args.content || args["content"] || "";
+    } else {
+      return;
+    }
+    if (!oldText && !newText) return;
+
+    const diffEl = item.querySelector(".tool-item-diff");
+    if (!diffEl || diffEl.dataset.filled === "1") return;
+
+    const ops = _trimDiffContext(_lineDiff(oldText, newText), 3);
+    if (!ops.length) return;
+
+    const MAX = 50;
+    const truncated = ops.length > MAX;
+    const shown = truncated ? ops.slice(0, MAX) : ops;
+    const prefix = (k) => k === "add" ? "+" : k === "del" ? "-" : k === "hunk" ? "" : " ";
+    let html = shown.map(o => `<div class="diff-line diff-${o.kind}">${escapeHtml(prefix(o.kind) + o.text)}</div>`).join("");
+    if (truncated) {
+      html += `<div class="diff-line diff-more">… ${ops.length - MAX} more lines hidden</div>`;
+    }
+    diffEl.innerHTML = html;
+    diffEl.style.display = "";
+    diffEl.dataset.filled = "1";
+  }
+
+  function _toggleToolItemDetails(item) {
+    if (!item) return;
+    const details = item.querySelector(".tool-item-details");
+    if (!details) return;
+    const isHidden = details.style.display === "none";
+    if (isHidden) {
+      if (!details.dataset.filled) {
+        const json = item.dataset.argsJson || "";
+        details.textContent = json;
+        details.dataset.filled = "1";
+      }
+      details.style.display = "";
+      item.classList.add("expanded");
+    } else {
+      details.style.display = "none";
+      item.classList.remove("expanded");
+    }
+  }
+
+  // Pretty-print tool args as a JSON string, or empty string if unavailable.
+  function _formatToolArgs(args) {
+    if (args == null) return "";
+    if (typeof args === "string") return args;
+    try { return JSON.stringify(args, null, 2); } catch (_) { return ""; }
+  }
+
   // Convert ANSI escape codes to HTML spans with color classes.
   // Handles the common SGR codes used by shell scripts (colors + reset).
   function _ansiToHtml(text) {
@@ -1051,6 +1197,12 @@ const Sessions = (() => {
       status.className = "tool-item-status ok";
       status.textContent = "✓";
     }
+    const toolName = last.dataset.toolName || "";
+    if (toolName === "edit" || toolName === "write") {
+      let parsedArgs = null;
+      try { parsedArgs = JSON.parse(last.dataset.argsJson || "null"); } catch (_) {}
+      if (parsedArgs) _renderEditWriteDiff(last, toolName, parsedArgs);
+    }
     // Render the result string (e.g. "waiting (#4) — 128B\nstep1\nstep2…")
     // into the stdout area so the user can see what actually happened.
     // If the area already has streamed content (future feature), leave it.
@@ -1090,7 +1242,7 @@ const Sessions = (() => {
     switch (ev.type) {
       case "history_user_message": {
         // Collapse any open tool group from the previous round
-        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; }
+        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; historyCtx.lastItem = null; }
         const el = document.createElement("div");
         el.className = "msg msg-user";
         // Render image thumbnails and PDF badges (if any) followed by the text content
@@ -1144,7 +1296,7 @@ const Sessions = (() => {
 
       case "assistant_message": {
         // Collapse tool group before assistant reply
-        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; }
+        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; historyCtx.lastItem = null; }
         const el = document.createElement("div");
         el.className = "msg msg-assistant";
         el.dataset.raw = ev.content || "";
@@ -1168,6 +1320,12 @@ const Sessions = (() => {
         if (historyCtx.group && historyCtx.lastItem) {
           const status = historyCtx.lastItem.querySelector(".tool-item-status");
           if (status) { status.className = "tool-item-status ok"; status.textContent = "✓"; }
+          const toolName = historyCtx.lastItem.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);
+          }
           const stdout = historyCtx.lastItem.querySelector(".tool-item-stdout");
           if (stdout) {
             const resultStr = (ev.result == null) ? "" : String(ev.result).trim();
@@ -1178,21 +1336,18 @@ const Sessions = (() => {
               stdout.style.display = "none";
             }
           }
-          historyCtx.lastItem = null;
         }
         break;
       }
 
       case "token_usage": {
-        // Collapse any open tool group before rendering the token line
-        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; }
-        Sessions.appendTokenUsage(ev, container);
+        Sessions.appendTokenUsage(ev, container, historyCtx.lastItem);
         break;
       }
 
       case "request_feedback": {
         // Collapse any open tool group
-        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; }
+        if (historyCtx.group) { _collapseToolGroup(historyCtx.group); historyCtx.group = null; historyCtx.lastItem = null; }
 
         const rfQuestion = ev.question || "";
         const rfContext  = ev.context  || "";
@@ -1260,7 +1415,7 @@ const Sessions = (() => {
     stdout.innerHTML += lines.map(_ansiToHtml).join("");
     if (stdout.style.display === "none") stdout.style.display = "";
     stdout.scrollTop = stdout.scrollHeight;
-    const messages = $("messages");
+    const messages = RenderTarget.outer();
     _scrollToBottomIfNeeded(messages);
   }
 
@@ -1271,7 +1426,7 @@ const Sessions = (() => {
     const lines = _pendingStdoutLines;
     _pendingStdoutLines = null;
 
-    const messages = $("messages");
+    const messages = RenderTarget.outer();
     if (!messages) return;
     const items = messages.querySelectorAll(".tool-item");
     if (items.length === 0) return;
@@ -1351,9 +1506,9 @@ const Sessions = (() => {
       // Collapse any tool group still open at end of page
       if (historyCtx.group) _collapseToolGroup(historyCtx.group);
 
-      // Insert into #messages (only renders if this session is currently active)
+      // Insert into the outer message stream (history never lands inside an active phase card).
       if (id === _activeId) {
-        const messages = $("messages");
+        const messages = RenderTarget.outer();
         if (prepend && messages.firstChild) {
           const scrollBefore = messages.scrollHeight - messages.scrollTop;
           messages.insertBefore(frag, messages.firstChild);
@@ -1500,9 +1655,17 @@ const Sessions = (() => {
   let _copyDelegationInstalled = false;
   function _ensureCopyDelegation() {
     if (_copyDelegationInstalled) return;
-    const messages = $("messages");
+    const messages = RenderTarget.outer();
     if (!messages) return;
     messages.addEventListener("click", (e) => {
+      // ── Tool item: click header to expand/collapse args details ──
+      const toolHeader = e.target.closest(".tool-item-header.tool-item-expandable");
+      if (toolHeader) {
+        e.preventDefault();
+        e.stopPropagation();
+        _toggleToolItemDetails(toolHeader.closest(".tool-item"));
+        return;
+      }
       // ── Code block copy button ──
       const codeBtn = e.target.closest(".code-block-copy");
       if (codeBtn) {
@@ -1584,16 +1747,54 @@ const Sessions = (() => {
   }
 
   // Build the unified load-more button.
-  function _makeLoadMoreBtn() {
+  function _makeLoadMoreBtn(cron = false) {
     const btn = document.createElement("button");
     btn.className   = "btn-load-more-sessions";
-    btn.disabled    = _loadingMore;
-    btn.textContent = _loadingMore ? I18n.t("sessions.loadingMore") : I18n.t("sessions.loadMore");
-    btn.onclick = () => Sessions.loadMore();
+    const loading   = cron ? _cronLoadingMore : _loadingMore;
+    btn.disabled    = loading;
+    btn.textContent = loading ? I18n.t("sessions.loadingMore") : I18n.t("sessions.loadMore");
+    btn.onclick = () => cron ? Sessions.loadMoreCron() : Sessions.loadMore();
     return btn;
   }
 
+  function _makeSearchHeader(text) {
+    const div = document.createElement("div");
+    div.className = "session-search-group";
+    div.textContent = text;
+    return div;
+  }
+
   // ── Private render helper ─────────────────────────────────────────────
+  // Escape regex metacharacters so a user query can be safely substituted
+  // into a RegExp constructor (used to build a case-insensitive highlighter).
+  function _escapeRegex(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+
+  // Wrap occurrences of `query` inside `text` with <mark>. Both inputs are
+  // first HTML-escaped so the resulting fragment is safe to inject.
+  function _highlightSnippet(text, query) {
+    const safe = escapeHtml(text || "");
+    const q = (query || "").trim();
+    if (!q) return safe;
+    const re = new RegExp(_escapeRegex(escapeHtml(q)), "gi");
+    return safe.replace(re, (m) => `<mark>${m}</mark>`);
+  }
+
+  // Re-center a snippet around its first match so the keyword is always
+  // 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 || "";
+    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);
+  }
+
   //
   // Build and append a single session-item <div> into `container`.
   // Used by both the general list and the coding section.
@@ -1604,6 +1805,10 @@ const Sessions = (() => {
     if (s.pinned) el.classList.add("pinned");
     
     const displayName = s.name || _relativeTime(s.created_at);
+    const q = (_filter.q || "").trim();
+    const nameHtml = (q && s._matchVia === "name" && s.name)
+      ? _highlightSnippet(displayName, q)
+      : escapeHtml(displayName);
 
     // Meta line — prefer relative time of last activity. Tasks count is
     // only shown when > 0 to avoid visual noise on fresh sessions.
@@ -1644,10 +1849,15 @@ const Sessions = (() => {
       ? `<span class="session-dot dot-${s.status}"></span>`
       : "";
 
+    const snippetHtml = (s._matchVia === "content" && s.search_snippet)
+      ? `<div class="session-snippet">${_highlightSnippet(_centerSnippet(s.search_snippet, _filter.q), _filter.q)}</div>`
+      : "";
+
     el.innerHTML = `
       <div class="session-body">
-        <div class="session-name">${dotHtml}<span class="session-name__text">${escapeHtml(displayName)}</span>${badgeHtml}${codingBadgeHtml}${pinIcon}</div>
+        <div class="session-name">${dotHtml}<span class="session-name__text">${nameHtml}</span>${badgeHtml}${codingBadgeHtml}${pinIcon}</div>
         <div class="session-meta">${metaText}</div>
+        ${snippetHtml}
       </div>
       <button class="session-actions-btn" title="Actions"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2.5" cy="7" r="1.2" fill="currentColor"/><circle cx="7" cy="7" r="1.2" fill="currentColor"/><circle cx="11.5" cy="7" r="1.2" fill="currentColor"/></svg></button>`;
 
@@ -1668,6 +1878,13 @@ const Sessions = (() => {
       }, 200);
     };
 
+    // Right-click context menu
+    el.oncontextmenu = (e) => {
+      e.preventDefault();
+      Sessions._closeActionsMenu();
+      _showContextMenu(e, s);
+    };
+
     // Actions button - show menu
     const actionsBtn = el.querySelector(".session-actions-btn");
     actionsBtn.onclick = (e) => {
@@ -1679,13 +1896,17 @@ const Sessions = (() => {
   }
 
   // ── Cron group entry (renders the folded "Scheduled Tasks" entry) ─────
-  function _renderCronGroupItem(container, count) {
+  // `hasRunning` mirrors a normal session's status dot: show the green
+  // (running) dot only when any folded cron session is currently running,
+  // and render no dot at all when the group is idle.
+  function _renderCronGroupItem(container, count, hasRunning = false) {
     const el = document.createElement("div");
     el.className = "session-item cron-group-item";
+    const dotHtml = hasRunning ? `<span class="session-dot dot-running"></span>` : "";
     el.innerHTML = `
       <div class="session-body">
         <div class="session-name">
-          <span class="session-dot dot-idle" style="display:inline-block;opacity:0.6"></span>
+          ${dotHtml}
           <span class="session-name__text">📋 ${I18n.t("sessions.cronGroup")} (${count})</span>
         </div>
         <div class="session-meta">${I18n.t("sessions.cronGroupMeta", { n: count })}</div>
@@ -1694,6 +1915,10 @@ const Sessions = (() => {
     el.onclick = () => {
       _cronView = true;
       Sessions.renderList();
+      // Method A: always (re-)load the freshest first page of cron sessions
+      // on entering the sub-view. Independent cursor — never touches the
+      // outer list's pagination.
+      Sessions.loadMoreCron({ reset: true });
     };
     container.appendChild(el);
   }
@@ -1830,6 +2055,7 @@ const Sessions = (() => {
       }
       // Clean up per-session progress state (timer + DOM + logical state)
       Sessions._deleteProgressState(id);
+      _drafts.delete(id);
     },
 
     /** Load the next page of older sessions (unified time cursor). */
@@ -1881,9 +2107,55 @@ const Sessions = (() => {
       }
     },
 
+    /** Cron sub-view pagination — independent cursor, does NOT touch the outer
+     *  list's `_hasMore` / `loadMore` cursor. Fetches the next page of cron
+     *  sessions (type=cron) and pushes them into the shared `_sessions` array
+     *  (deduped), so WS patch/remove/add keep working unchanged. Only the
+     *  sub-view's own cursor + flags advance. Pass `reset:true` to start over
+     *  from the newest cron page (used on entering the sub-view). */
+    async loadMoreCron({ reset = false } = {}) {
+      if (_cronLoadingMore) return;
+      if (!reset && !_cronHasMore) return;
+      _cronLoadingMore = true;
+      if (reset) { _cronBefore = null; _cronHasMore = false; }
+
+      const sidebarList = document.getElementById("sidebar-list");
+      const savedScrollTop = sidebarList ? sidebarList.scrollTop : 0;
+      Sessions.renderList({ skipScrollToActive: true });
+
+      try {
+        const params = new URLSearchParams({ limit: "20", type: "cron" });
+        if (_cronBefore) params.set("before", _cronBefore);
+
+        const res  = await fetch(`/api/sessions?${params}`);
+        if (!res.ok) return;
+        const data = await res.json();
+
+        const rows = data.sessions || [];
+        rows.forEach(s => {
+          if (!_sessions.find(x => x.id === s.id)) _sessions.push(s);
+        });
+        // Advance cursor to the oldest cron created_at in THIS batch (exclude
+        // pinned — backend returns all pinned on the first page, bypassing
+        // pagination, so their created_at must not drag the cursor back).
+        const oldest = rows.reduce((min, s) => {
+          if (s.pinned || !s.created_at) return min;
+          return (!min || s.created_at < min) ? s.created_at : min;
+        }, null);
+        if (oldest) _cronBefore = oldest;
+        _cronHasMore = !!data.has_more;
+        if (data.cron_count != null) _cronCount = data.cron_count;
+      } catch (e) {
+        console.error("loadMoreCron error:", e);
+      } finally {
+        _cronLoadingMore = false;
+        Sessions.renderList({ skipScrollToActive: true });
+        if (sidebarList) sidebarList.scrollTop = savedScrollTop;
+      }
+    },
+
     /** Commit current filter values and re-fetch from server. Called by Enter / Go button. */
     async commitSearch() {
-      // Read live input values into _filter
       const qEl    = document.getElementById("session-search-q");
       const typeEl = document.getElementById("session-search-type");
       const dateEl = document.getElementById("session-search-date");
@@ -1891,29 +2163,73 @@ const Sessions = (() => {
       if (typeEl) _filter.type = typeEl.value;
       if (dateEl) _filter.date = dateEl.dataset.value || "";
 
-      // Clear list and reload from server with new filters
-      _sessions.length = 0;
-      _hasMore = false;
+      const token = ++_searchToken;
       _loadingMore = true;
-      Sessions.renderList();
+      Sessions.renderList({ skipScrollToActive: true });
+
+      let nextSessions = [];
+      let nextHasMore  = false;
+      let nextCronCnt  = 0;
+      let nextSplit    = null;
 
       try {
-        const params = new URLSearchParams({ limit: "20" });
-        if (_filter.q)    params.set("q",    _filter.q);
-        if (_filter.date) params.set("date", _filter.date);
-        if (_filter.type) params.set("type", _filter.type);
+        const baseParams = new URLSearchParams({ limit: "20" });
+        if (_filter.date) baseParams.set("date", _filter.date);
+        if (_filter.type) baseParams.set("type", _filter.type);
+
+        if (_filter.q) {
+          const pName    = new URLSearchParams(baseParams);
+          const pContent = new URLSearchParams(baseParams);
+          pName.set("q", _filter.q);    pName.set("q_scope", "name");
+          pContent.set("q", _filter.q); pContent.set("q_scope", "content");
+          pContent.set("limit", "50");
+
+          const [nameRes, contentRes] = await Promise.all([
+            fetch(`/api/sessions?${pName}`),
+            fetch(`/api/sessions?${pContent}`),
+          ]);
+          if (token !== _searchToken) return;
+          const nameData    = nameRes.ok    ? await nameRes.json()    : { sessions: [] };
+          const contentData = contentRes.ok ? await contentRes.json() : { sessions: [] };
+          if (token !== _searchToken) return;
+
+          const nameIds    = new Set();
+          const contentIds = new Set();
+          (nameData.sessions || []).forEach(s => { nameIds.add(s.id); s._matchVia = "name"; });
+          (contentData.sessions || []).forEach(s => {
+            if (nameIds.has(s.id)) return;
+            contentIds.add(s.id);
+            s._matchVia = "content";
+          });
 
-        const res  = await fetch(`/api/sessions?${params}`);
-        if (!res.ok) return;
-        const data = await res.json();
-        _sessions.push(...(data.sessions || []));
-        _hasMore   = !!data.has_more;
-        _cronCount = data.cron_count || 0;
+          nextSessions = [...(nameData.sessions || [])];
+          (contentData.sessions || []).forEach(s => { if (!nameIds.has(s.id)) nextSessions.push(s); });
+          nextHasMore  = false;
+          nextCronCnt  = nameData.cron_count || 0;
+          nextSplit    = { nameIds, contentIds, contentLoaded: contentRes.ok };
+        } else {
+          const res = await fetch(`/api/sessions?${baseParams}`);
+          if (token !== _searchToken) return;
+          if (!res.ok) return;
+          const data = await res.json();
+          if (token !== _searchToken) return;
+          nextSessions = data.sessions || [];
+          nextHasMore  = !!data.has_more;
+          nextCronCnt  = data.cron_count || 0;
+        }
+
+        _sessions.length = 0;
+        _sessions.push(...nextSessions);
+        _hasMore     = nextHasMore;
+        _cronCount   = nextCronCnt;
+        _searchSplit = nextSplit;
       } catch (e) {
-        console.error("commitSearch error:", e);
+        if (token === _searchToken) console.error("commitSearch error:", e);
       } finally {
-        _loadingMore = false;
-        Sessions.renderList();
+        if (token === _searchToken) {
+          _loadingMore = false;
+          Sessions.renderList();
+        }
       }
     },
 
@@ -2005,6 +2321,26 @@ const Sessions = (() => {
       }
     },
 
+    /** Fork a session — creates a copy with the same history and working dir. */
+    async fork(sessionId) {
+      try {
+        const res = await fetch(`/api/sessions/${sessionId}/fork`, { method: "POST" });
+        if (!res.ok) {
+          const data = await res.json().catch(() => ({}));
+          console.error("Fork session failed:", data.error || res.status);
+          return;
+        }
+        const data = await res.json();
+        if (data.session) {
+          Sessions.add(data.session);
+          Sessions.renderList();
+          Sessions.select(data.session.id);
+        }
+      } catch (err) {
+        console.error("Fork session error:", err);
+      }
+    },
+
     // ── Selection ─────────────────────────────────────────────────────────
     //
     // Panel switching is handled by Router — Sessions only manages state.
@@ -2032,6 +2368,12 @@ const Sessions = (() => {
     /** Set _activeId directly (called by Router when activating a session). */
     _setActiveId(id) {
       _activeId = id;
+      const input = $("user-input");
+      if (input) {
+        input.value = _drafts.get(id) || "";
+        input.style.height = "auto";
+        if (input.value) input.style.height = Math.min(input.scrollHeight, 200) + "px";
+      }
     },
 
     /** Restore cached messages for a session into the #messages container. */
@@ -2043,9 +2385,11 @@ const Sessions = (() => {
      *  Called by Router before switching away from a session view. */
     _cacheActiveAndDeselect() {
       _cacheActiveMessages();
-      // Detach progress UI (DOM + timer) but preserve the logical state
-      // so it can be restored when the user switches back to this session.
-      if (_activeId) Sessions._detachProgressUI(_activeId);
+      if (_activeId) {
+        const input = $("user-input");
+        if (input) _drafts.set(_activeId, input.value);
+        Sessions._detachProgressUI(_activeId);
+      }
       _activeId = null;
       WS.setSubscribedSession(null);
       Sessions.renderList();
@@ -2097,7 +2441,6 @@ const Sessions = (() => {
       const hasActiveFilter = !!(_filter.q || _filter.type || _filter.date);
       const isCronView      = _cronView && !hasActiveFilter;
       const cronSessions    = visible.filter(s => s.source === "cron");
-      const nonCronSessions = visible.filter(s => s.source !== "cron");
 
       // Update chat-section header based on view mode
       _updateChatHeader(isCronView);
@@ -2106,30 +2449,70 @@ const Sessions = (() => {
       list.innerHTML = "";
 
       if (hasActiveFilter) {
-        // Filter active: show all matching results flat, no group entry
-        visible.forEach(s => _renderSessionItem(list, s));
-      } else if (isCronView) {
-        // Cron sub-view: show only cron sessions.
-        // If none are loaded yet, auto-load more pages until we find them.
-        if (cronSessions.length === 0) {
-          if (_hasMore && !_loadingMore) {
-            list.innerHTML = `<div class="session-empty">${I18n.t("sessions.cronLoading")}</div>`;
-            Sessions.loadMore();  // async — will call renderList() again when done
-            return;               // skip empty-state / load-more button for now
+        if (_filter.q && _searchSplit) {
+          const { nameIds, contentIds, contentLoaded } = _searchSplit;
+          const nameRows    = visible.filter(s => nameIds.has(s.id));
+          const contentRows = visible.filter(s => contentIds.has(s.id));
+
+          if (nameRows.length > 0) {
+            list.appendChild(_makeSearchHeader(I18n.t("sessions.search.byName", { n: nameRows.length })));
+            nameRows.forEach(s => _renderSessionItem(list, s));
           }
-          if (_loadingMore) {
-            // A loadMore() call is already in flight (its own renderList call
-            // reached us).  Keep the loading indicator so the user never sees
-            // the "no sessions" empty state during the gap.
-            list.innerHTML = `<div class="session-empty">${I18n.t("sessions.cronLoading")}</div>`;
-            return;
+          if (contentLoaded) {
+            list.appendChild(_makeSearchHeader(I18n.t("sessions.search.byContent", { n: contentRows.length })));
+            if (contentRows.length === 0) {
+              const empty = document.createElement("div");
+              empty.className = "session-empty";
+              empty.textContent = I18n.t("sessions.search.contentEmpty");
+              list.appendChild(empty);
+            } else {
+              contentRows.forEach(s => _renderSessionItem(list, s));
+            }
           }
+        } else {
+          visible.forEach(s => _renderSessionItem(list, s));
+        }
+      } else if (isCronView) {
+        // Cron sub-view: show only cron sessions, paginated independently via
+        // loadMoreCron() (the first page is fetched on entering the view).
+        // We never call the outer loadMore() here, so the outer list's cursor
+        // is left untouched. While the first page is in flight and nothing is
+        // loaded yet, show a loading placeholder instead of the empty state.
+        if (cronSessions.length === 0 && _cronLoadingMore) {
+          list.innerHTML = `<div class="session-empty">${I18n.t("sessions.cronLoading")}</div>`;
+          return;
         }
         cronSessions.forEach(s => _renderSessionItem(list, s));
       } else if (_cronCount > 0) {
-        // Normal list view: group entry (uses total count, not just loaded) + non-cron sessions
-        _renderCronGroupItem(list, _cronCount);
-        nonCronSessions.forEach(s => _renderSessionItem(list, s));
+        // Normal list view: the cron group entry is a *virtual* row that
+        // participates in the time-ordering instead of being pinned to the
+        // top. We walk the already-sorted `visible` list and drop the group
+        // entry at the position of the newest (first-encountered) cron
+        // session — so it sits exactly where the latest folded cron task
+        // would sort by created_at. Pinning is intentionally ignored for the
+        // entry itself: a pinned cron session only takes effect *inside* the
+        // folded sub-view, not on the outer entry.
+        const cronHasRunning = cronSessions.some(s => s.status === "running");
+        let cronEntryRendered = false;
+        visible.forEach(s => {
+          if (s.source === "cron") {
+            // Render the group entry once, at the first (newest) cron slot;
+            // skip every individual cron session in the flat list.
+            if (!cronEntryRendered) {
+              _renderCronGroupItem(list, _cronCount, cronHasRunning);
+              cronEntryRendered = true;
+            }
+            return;
+          }
+          _renderSessionItem(list, s);
+        });
+        // NOTE: we intentionally do NOT append a fallback entry when no cron
+        // session is loaded yet. The group entry is a virtual row that must
+        // ride along with pagination: it only appears at the sort slot of the
+        // first loaded cron session. If the newest cron lives on a later page,
+        // the entry simply shows up once that page is loaded — rather than
+        // being forced onto the bottom of page 1 (which would mislead the
+        // sort position and miss the running state of an unpaged cron).
       } else {
         // Normal list view, no cron sessions
         visible.forEach(s => _renderSessionItem(list, s));
@@ -2140,7 +2523,11 @@ const Sessions = (() => {
         list.innerHTML = `<div class="session-empty">${I18n.t("sessions.empty")}</div>`;
       }
 
-      if (_hasMore) list.appendChild(_makeLoadMoreBtn());
+      if (isCronView) {
+        if (_cronHasMore) list.appendChild(_makeLoadMoreBtn(true));
+      } else if (_hasMore) {
+        list.appendChild(_makeLoadMoreBtn());
+      }
 
       // Scroll active session into view so the sidebar always shows the current session.
       if (!skipScrollToActive) {
@@ -2180,6 +2567,54 @@ const Sessions = (() => {
       }
     },
 
+    /** 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 menu = document.createElement("div");
+      menu.className = "session-context-menu";
+      menu.innerHTML = `
+        <div class="session-actions-menu-item" data-action="fork">
+          <span class="session-actions-menu-icon">${iconFork}</span>
+          <span class="session-actions-menu-label">${escapeHtml(I18n.t("sessions.actions.fork"))}</span>
+        </div>
+      `;
+
+      document.body.appendChild(menu);
+      menu.style.position = "fixed";
+      menu.style.top = e.clientY + "px";
+      menu.style.left = e.clientX + "px";
+      // Keep menu within viewport
+      requestAnimationFrame(() => {
+        const r = menu.getBoundingClientRect();
+        if (r.right > window.innerWidth)  menu.style.left = (window.innerWidth - r.width - 8) + "px";
+        if (r.bottom > window.innerHeight) menu.style.top = (window.innerHeight - r.height - 8) + "px";
+      });
+
+      menu.addEventListener("click", async (ev) => {
+        const item = ev.target.closest(".session-actions-menu-item");
+        if (!item) return;
+        const action = item.dataset.action;
+        Sessions._closeContextMenu();
+        if (action === "fork") {
+          await Sessions.fork(session.id);
+        }
+      });
+
+      setTimeout(() => {
+        document.addEventListener("click", Sessions._closeContextMenu, { once: true });
+        document.addEventListener("contextmenu", Sessions._closeContextMenu, { once: true });
+      }, 0);
+    },
+
+    _closeContextMenu() {
+      const existing = document.querySelector(".session-context-menu");
+      if (existing) existing.remove();
+    },
+
     /** Show actions menu (pin/rename/delete) next to the actions button. */
     _showActionsMenu(button, session) {
       // Close any existing menu first
@@ -2187,6 +2622,7 @@ const Sessions = (() => {
 
       // Lucide-style stroked icons to match the rest of the UI
       const iconPin = `<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" style="transform:rotate(45deg);display:block"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>`;
+      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 iconRename = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>`;
       const iconTrash = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>`;
 
@@ -2195,6 +2631,10 @@ const Sessions = (() => {
       const menu = document.createElement("div");
       menu.className = "session-actions-menu";
       menu.innerHTML = `
+        <div class="session-actions-menu-item" data-action="fork">
+          <span class="session-actions-menu-icon">${iconFork}</span>
+          <span class="session-actions-menu-label">${escapeHtml(I18n.t("sessions.actions.fork"))}</span>
+        </div>
         <div class="session-actions-menu-item" data-action="pin">
           <span class="session-actions-menu-icon">${iconPin}</span>
           <span class="session-actions-menu-label">${escapeHtml(pinLabel)}</span>
@@ -2224,7 +2664,9 @@ const Sessions = (() => {
         const action = item.dataset.action;
         Sessions._closeActionsMenu();
 
-        if (action === "pin") {
+        if (action === "fork") {
+          await Sessions.fork(session.id);
+        } else if (action === "pin") {
           await Sessions.togglePin(session.id);
         } else if (action === "rename") {
           // Close sidebar on mobile so the rename dialog isn't obscured
@@ -2580,10 +3022,15 @@ const Sessions = (() => {
     _liveToolGroup:     null,  // current open .tool-group DOM element
     _liveLastToolItem:  null,  // last .tool-item added (for tool_result pairing)
 
+    // Append a diff block to the message stream (for edit/write previews).
+    appendDiff(rows, truncated, hiddenLines) {
+      // Deprecated no-op; diff is now rendered inline within the tool-item.
+    },
+
     // Append a tool_call as a compact item inside the live tool group.
     // Creates the group if it doesn't exist yet.
     appendToolCall(name, args, summary) {
-      const messages = $("messages");
+      const messages = RenderTarget.current();
       if (!Sessions._liveToolGroup) {
         Sessions._liveToolGroup = _makeToolGroup();
         messages.appendChild(Sessions._liveToolGroup);
@@ -2596,7 +3043,6 @@ const Sessions = (() => {
     appendToolResult(result) {
       if (Sessions._liveToolGroup && Sessions._liveLastToolItem) {
         _completeLastToolItem(Sessions._liveToolGroup, result);
-        Sessions._liveLastToolItem = null;
       }
     },
 
@@ -2609,7 +3055,7 @@ const Sessions = (() => {
       // .tool-item visible in the DOM — that is the in-flight tool the stdout belongs to.
       let toolItem = Sessions._liveLastToolItem;
       if (!toolItem) {
-        const messages = $("messages");
+        const messages = RenderTarget.current();
         if (messages) {
           const items = messages.querySelectorAll(".tool-item");
           if (items.length > 0) toolItem = items[items.length - 1];
@@ -2627,12 +3073,13 @@ const Sessions = (() => {
       _applyStdoutToItem(toolItem, lines);
     },
 
-    // Append a token usage line directly to the message list.
-    // Server guarantees this event arrives AFTER assistant_message, so no buffering needed.
-    // Format mirrors CLI:
-    //   [Tokens] | +409 | [*] | Input: 69,977 (cache: 69,566 read, 410 write) | Output: 101 | Total: 70,078 | Cost: $0.02392
-    appendTokenUsage(ev, container) {
-      const messages = container || $("messages");
+    // Append a token usage line. By default it attaches to the most recent
+    // .tool-item (so it visually belongs to that tool); falls back to the
+    // outer message list when no tool-item is available (e.g. plain
+    // assistant turn with no tool calls).
+    appendTokenUsage(ev, container, hostItem) {
+      const messages = container || RenderTarget.current();
+      const host = hostItem || Sessions._liveLastToolItem || null;
       const el = document.createElement("div");
       el.className = "token-usage-line";
 
@@ -2691,8 +3138,13 @@ const Sessions = (() => {
           `<span class="tu-field">Total: <b>${(ev.total_tokens || 0).toLocaleString()}</b></span>` +
         `</span>`;
 
-      messages.appendChild(el);
-      if (!container) _scrollToBottomIfNeeded(messages); // only auto-scroll for live events
+      el.classList.add(host ? "tu-attached" : "tu-standalone");
+      if (host) {
+        host.appendChild(el);
+      } else {
+        messages.appendChild(el);
+        if (!container) _scrollToBottomIfNeeded(messages);
+      }
     },
 
     // Collapse the live tool group (call when AI starts responding or task ends).
@@ -2708,7 +3160,7 @@ const Sessions = (() => {
       // Starting a new assistant/user/info message: close any open tool group
       if (type !== "tool") Sessions.collapseToolGroup();
 
-      const messages = $("messages");
+      const messages = RenderTarget.current();
 
       // For error messages: remove any existing error messages first to avoid duplicates
       if (type === "error") {
@@ -2762,7 +3214,7 @@ const Sessions = (() => {
 
     appendInfo(text, subline) {
       Sessions.collapseToolGroup();
-      const messages = $("messages");
+      const messages = RenderTarget.current();
       const el = document.createElement("div");
       el.className   = subline ? "msg msg-info msg-info-main" : "msg msg-info";
       el.textContent = text;
@@ -2780,7 +3232,7 @@ const Sessions = (() => {
     // Called when the agent needs user input to continue.
     showFeedbackRequest(question, context, options) {
       Sessions.collapseToolGroup();
-      const messages = $("messages");
+      const messages = RenderTarget.current();
       const hasOptions = options && Array.isArray(options) && options.length > 0;
 
       // Normalize bullet symbols to markdown list format so marked renders them as <ul>
@@ -2925,7 +3377,7 @@ const Sessions = (() => {
       // Only attach if this session is currently visible
       if (id !== _activeId) return;
 
-      const messages = $("messages");
+      const messages = RenderTarget.outer();
       if (!messages) return;
 
       // Clean up any previous DOM/timer for this session (idempotent)
@@ -3000,7 +3452,7 @@ const Sessions = (() => {
             existing.el.textContent = Sessions._composeProgressLine(existing.displayText, existing.startTime, existing.metadata, existing.lastChunkAt);
           }
         }, 250);
-        _scrollToBottomIfNeeded($("messages"));
+        _scrollToBottomIfNeeded(RenderTarget.outer());
         return;
       }
 
@@ -3452,16 +3904,16 @@ const Sessions = (() => {
 
         const nameLine = document.createElement("span");
         nameLine.className = "sib-model-name-main";
-        nameLine.textContent = m.model;
+        // When a non-default quick-switch model is active for the current row,
+        // show only that model's name (avoid the long "main → quick-switch"
+        // string that gets truncated).
+        const hasActiveOverride =
+          m.id === currentModelId &&
+          subInfo.current &&
+          subInfo.current !== subInfo.cardModel;
+        nameLine.textContent = hasActiveOverride ? subInfo.current : m.model;
         left.appendChild(nameLine);
 
-        if (m.id === currentModelId && subInfo.current && subInfo.current !== subInfo.cardModel) {
-          const overrideLine = document.createElement("span");
-          overrideLine.className = "sib-model-name-override";
-          overrideLine.textContent = `→ ${subInfo.current}`;
-          left.appendChild(overrideLine);
-        }
-
         if (_nameCounts[m.model] > 1) {
           left.classList.add("has-sub");
           const host = (() => {
@@ -3503,7 +3955,7 @@ const Sessions = (() => {
           const toggleBtn = document.createElement("button");
           toggleBtn.type = "button";
           toggleBtn.className = "sib-submodel-toggle";
-          toggleBtn.title = "Switch sub-model";
+          toggleBtn.title = I18n.t("sib.variant.header");
           toggleBtn.setAttribute("aria-expanded", "false");
           toggleBtn.innerHTML =
             '<svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true">' +
@@ -3766,7 +4218,7 @@ const Sessions = (() => {
 
     const header = document.createElement("div");
     header.className = "sib-submodel-panel-header";
-    header.textContent = "Sub-model";
+    header.textContent = I18n.t("sib.variant.header");
     panel.appendChild(header);
 
     const cardDefault = subInfo.cardModel;
@@ -3788,7 +4240,7 @@ const Sessions = (() => {
       if (name === cardDefault) {
         const tag = document.createElement("span");
         tag.className = "sib-submodel-default-tag";
-        tag.textContent = "default";
+        tag.textContent = I18n.t("sib.variant.default");
         row.appendChild(tag);
       }
 
@@ -4040,11 +4492,12 @@ const Sessions = (() => {
       // Load tree for a given path
       async function loadTreeForPath(dirPath, absolute = false) {
         treeContainer.innerHTML = `<div class="dp-loading">${t("sib.dir.loading", "加载中...")}</div>`;
+        if (dirPath) { pathInput.value = dirPath; selectedPath = dirPath; }
         // Auto-detect absolute mode: path is absolute and outside working directory
-        const useAbsolute = absolute || (dirPath.startsWith("/") && (!rootDir || !dirPath.startsWith(rootDir)));
+        const useAbsolute = absolute || (dirPath.startsWith("/") && (!rootDir || !(dirPath === rootDir || dirPath.startsWith(rootDir + "/"))));
         // Convert absolute path to relative path for API
         let relPath = dirPath;
-        if (!useAbsolute && rootDir && dirPath.startsWith(rootDir)) {
+        if (!useAbsolute && rootDir && (dirPath === rootDir || dirPath.startsWith(rootDir + "/"))) {
           relPath = dirPath.substring(rootDir.length).replace(/^\/+/, "");
         }
         try {
@@ -4053,7 +4506,7 @@ const Sessions = (() => {
           if (rootDir && presets.children.length === 0) {
             setupPresets();
             // Update pathInput to show absolute path
-            if (rootDir !== currentDir && !currentDir.startsWith(rootDir)) {
+            if (rootDir !== currentDir && !(currentDir === rootDir || currentDir.startsWith(rootDir + "/"))) {
               pathInput.value = rootDir;
               selectedPath = rootDir;
             }
@@ -4146,9 +4599,9 @@ const Sessions = (() => {
         }
 
         // Determine if we need absolute mode (path outside working directory)
-        const isAbsolute = parentPath.startsWith("/") && (!rootDir || !parentPath.startsWith(rootDir));
+        const isAbsolute = parentPath.startsWith("/") && (!rootDir || !(parentPath === rootDir || parentPath.startsWith(rootDir + "/")));
         let relPath = parentPath;
-        if (!isAbsolute && rootDir && parentPath.startsWith(rootDir)) {
+        if (!isAbsolute && rootDir && (parentPath === rootDir || parentPath.startsWith(rootDir + "/"))) {
           relPath = parentPath.substring(rootDir.length).replace(/^\/+/, "");
         }
 
@@ -4180,10 +4633,12 @@ const Sessions = (() => {
       });
 
       // Keyboard navigation in autocomplete
+      const pathIme = IME.track(pathInput);
       pathInput.addEventListener("keydown", (e) => {
         const items = autocomplete.querySelectorAll(".dp-ac-item");
         if (!items.length || autocomplete.style.display === "none") {
           if (e.key === "Enter") {
+            if (pathIme.isComposing(e)) return;
             e.preventDefault();
             // Navigate to typed path without closing modal
             const dir = pathInput.value.trim();
@@ -4207,6 +4662,7 @@ const Sessions = (() => {
           items.forEach((el, i) => el.classList.toggle("active", i === activeIndex));
           items[activeIndex]?.scrollIntoView({ block: "nearest" });
         } else if (e.key === "Enter") {
+          if (pathIme.isComposing(e)) return;
           e.preventDefault();
           if (activeIndex >= 0 && items[activeIndex]) {
             // Select the highlighted suggestion