openclacky 1.2.12 → 1.2.13

data/lib/clacky/web/sessions.js

@@ -19,12 +19,17 @@ 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) ──────────────────────
@@ -225,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;
@@ -315,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(
@@ -339,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());
@@ -355,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
@@ -530,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) => {
@@ -554,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;
       };
@@ -584,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}`));
@@ -743,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.
@@ -777,6 +804,7 @@ const Sessions = (() => {
 
     input.value        = "";
     input.style.height = "auto";
+    _drafts.delete(Sessions.activeId);
     setTimeout(() => { _sending = false; }, 300);
   }
 
@@ -847,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) => {
@@ -908,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);
       }
@@ -963,11 +991,87 @@ const Sessions = (() => {
         `<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");
@@ -1093,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.
@@ -1132,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
@@ -1186,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 || "";
@@ -1210,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();
@@ -1220,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  || "";
@@ -1302,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);
   }
 
@@ -1313,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;
@@ -1393,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);
@@ -1542,7 +1655,7 @@ 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 ──
@@ -1644,7 +1757,44 @@ const Sessions = (() => {
     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.
@@ -1655,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.
@@ -1695,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>`;
 
@@ -1719,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) => {
@@ -1889,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). */
@@ -1989,7 +2156,6 @@ const Sessions = (() => {
 
     /** 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");
@@ -1997,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();
+        }
       }
     },
 
@@ -2111,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.
@@ -2138,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. */
@@ -2149,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();
@@ -2211,8 +2449,29 @@ const Sessions = (() => {
       list.innerHTML = "";
 
       if (hasActiveFilter) {
-        // Filter active: show all matching results flat, no group entry
-        visible.forEach(s => _renderSessionItem(list, s));
+        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 (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).
@@ -2308,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
@@ -2315,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>`;
 
@@ -2323,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>
@@ -2352,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
@@ -2708,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);
@@ -2724,7 +3043,6 @@ const Sessions = (() => {
     appendToolResult(result) {
       if (Sessions._liveToolGroup && Sessions._liveLastToolItem) {
         _completeLastToolItem(Sessions._liveToolGroup, result);
-        Sessions._liveLastToolItem = null;
       }
     },
 
@@ -2737,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];
@@ -2755,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";
 
@@ -2819,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).
@@ -2836,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") {
@@ -2890,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;
@@ -2908,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>
@@ -3053,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)
@@ -3128,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;
       }
 
@@ -4168,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 {
@@ -4181,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;
             }
@@ -4274,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(/^\/+/, "");
         }
 
@@ -4308,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();
@@ -4335,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