openclacky 1.5.21 → 1.5.22

data/lib/clacky/web/projects.js

@@ -19,9 +19,9 @@ const Projects = (() => {
 
   // "recent" (default) — sort by updated_at desc
   // "priority" — oldest-created project first
-  const _LS_SORT_KEY            = "clacky_projects_sort_mode";
-  const _LS_COLLAPSED_KEY       = "clacky_projects_collapsed";
-  const _LS_SECTION_COLLAPSE_KEY = "clacky_projects_section_collapsed";
+  const _LS_SORT_KEY            = "clacky-projects-sort-mode";
+  const _LS_COLLAPSED_KEY       = "clacky-projects-collapsed";
+  const _LS_SECTION_COLLAPSE_KEY = "clacky-projects-section-collapsed";
   let _sortMode         = localStorage.getItem(_LS_SORT_KEY) || "recent";
   let _sectionCollapsed = localStorage.getItem(_LS_SECTION_COLLAPSE_KEY) === "1";
   let _draggedSession   = null;  // { id, projectId } during an internal session drag
@@ -29,7 +29,7 @@ const Projects = (() => {
 
   // Track which project groups are collapsed: Set of project IDs (persisted to localStorage)
   const _collapsed = new Set(
-    JSON.parse(localStorage.getItem(_LS_COLLAPSED_KEY) || "[]")
+    JSON.parse(localStorage.getItem(_LS_COLLAPSED_KEY) ?? "[]")
   );
 
   function _saveCollapsed() {
@@ -161,6 +161,37 @@ const Projects = (() => {
     Trash.refreshIfShown();
   }
 
+  /**
+   * GET /api/projects/:id/git — branch state of a work tree. `dir` overrides
+   * the project's own working dir, since a session may run in another repo.
+   * Returns { repo: false } for paths that are not a git work tree.
+   */
+  async function gitInfo(id, dir) {
+    const qs   = dir ? `?dir=${encodeURIComponent(dir)}` : "";
+    const res  = await fetch(`/api/projects/${id}/git${qs}`);
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || "Failed to load git state");
+    return data;
+  }
+
+  /**
+   * POST /api/projects/:id/git/checkout — switch the work tree to a branch.
+   * `create` branches off `from` (defaults to HEAD); pass a remote ref as
+   * `from` to get a tracking branch. `dir` targets a work tree other than the
+   * project's own. Throws with git's own message on failure (e.g. uncommitted
+   * changes blocking the switch).
+   */
+  async function checkoutBranch(id, { branch, create = false, from = null, dir = "" } = {}) {
+    const res  = await fetch(`/api/projects/${id}/git/checkout`, {
+      method:  "POST",
+      headers: { "Content-Type": "application/json" },
+      body:    JSON.stringify({ branch, create, from, dir }),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || "Failed to switch branch");
+    return data;
+  }
+
   /**
    * PATCH /api/sessions/:sessionId/project — assign or remove a session's project.
    * Pass projectId=null to remove from project.
@@ -1182,6 +1213,8 @@ const Projects = (() => {
     update,
     remove,
     moveSession,
+    gitInfo,
+    checkoutBranch,
     promptCreate,
     promptEdit,
     promptDelete,

data/lib/clacky/web/sessions.js

@@ -45,8 +45,10 @@ const Sessions = (() => {
   // Sessions that finished while the user was looking elsewhere. Holds a
   // transient "done" dot until the session is opened or DONE_DOT_TTL elapses,
   // so a completed background task is noticeable without a permanent marker.
-  const _recentlyDone      = new Map();  // { [session_id]: timeoutId }
+  const _recentlyDone      = new Map();  // { [session_id]: { timer, summary } }
   const DONE_DOT_TTL       = 5 * 60 * 1000;
+  // Summary taken from _recentlyDone on open, appended once that history loads.
+  let   _unseenSummary     = null;  // { id, ev } | null
   // Active search result split when _filter.q is non-empty:
   // { nameIds: Set<id>, contentIds: Set<id>, contentLoaded: bool }
   let   _searchSplit       = null;
@@ -109,7 +111,7 @@ const Sessions = (() => {
   let   _pendingStdoutLines = null; // string[] | null
 
   // ── Chat section collapse ──────────────────────────────────────────────────
-  const _CHAT_COLLAPSE_KEY = "clacky_chat_section_collapsed";
+  const _CHAT_COLLAPSE_KEY = "clacky-chat-section-collapsed";
   let   _chatCollapsed     = localStorage.getItem(_CHAT_COLLAPSE_KEY) === "1";
 
   // ── Markdown renderer ──────────────────────────────────────────────────
@@ -675,89 +677,30 @@ const Sessions = (() => {
     return ACCEPTED_IMAGE_TYPES.includes(file.type);
   }
 
-  // Line-art glyphs for file chips. Emoji render differently on every platform (and
-  // badly in dark themes), so chips draw a stroked SVG that inherits currentColor.
-  const DOC_ICON_PATHS = {
-    file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>',
-    doc: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M9 13h6"/><path d="M9 17h5"/>',
-    sheet: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M8 13h3"/><path d="M13 13h3"/><path d="M8 17h3"/><path d="M13 17h3"/>',
-    slide: '<path d="M2 3h20"/><path d="M20 3v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/>',
-    code: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m10 13-2 2 2 2"/><path d="m14 17 2-2-2-2"/>',
-    image: '<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>',
-    archive: '<rect x="2" y="3" width="20" height="5" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>',
-    video: '<circle cx="12" cy="12" r="9"/><path d="m10 8.5 5.5 3.5L10 15.5z"/>',
-    audio: '<path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/>',
-  };
-
-  function _docTypeIcon(mimeType, filename, size) {
-    const lower = (filename || "").toLowerCase();
-    const mime = mimeType || "";
-    const px = size || 20;
-    let key = "file";
-    if (mime.startsWith("image/") ||
-        lower.endsWith(".png") || lower.endsWith(".jpg") || lower.endsWith(".jpeg") ||
-        lower.endsWith(".gif") || lower.endsWith(".webp") || lower.endsWith(".bmp") ||
-        lower.endsWith(".svg") || lower.endsWith(".ico") || lower.endsWith(".avif") ||
-        lower.endsWith(".heic") || lower.endsWith(".tif") || lower.endsWith(".tiff")) key = "image";
-    else if (mime === "application/zip" || mime === "application/x-zip-compressed" ||
-        mime === "application/gzip" || mime === "application/x-gzip" ||
-        mime === "application/x-tar" || mime === "application/x-compressed-tar" ||
-        mime.includes("7z") || mime.includes("rar") ||
-        lower.endsWith(".zip") || lower.endsWith(".tar") || lower.endsWith(".gz") ||
-        lower.endsWith(".tgz") || lower.endsWith(".tar.gz") || lower.endsWith(".rar") ||
-        lower.endsWith(".7z")) key = "archive";
-    else if (mime.includes("spreadsheetml") || mime === "application/vnd.ms-excel" ||
-        mime === "text/csv" || mime === "application/csv" ||
-        lower.endsWith(".xls") || lower.endsWith(".xlsx") || lower.endsWith(".et") ||
-        lower.endsWith(".ods") || lower.endsWith(".csv")) key = "sheet";
-    else if (mime.includes("presentationml") || mime === "application/vnd.ms-powerpoint" ||
-        lower.endsWith(".ppt") || lower.endsWith(".pptx") || lower.endsWith(".dps") ||
-        lower.endsWith(".odp") || lower.endsWith(".key")) key = "slide";
-    else if (mime === "application/pdf" || lower.endsWith(".pdf") ||
-        mime.includes("wordprocessingml") || mime === "application/msword" ||
-        mime === "text/markdown" || mime === "text/x-markdown" || mime === "text/plain" ||
-        lower.endsWith(".doc") || lower.endsWith(".docx") || lower.endsWith(".wps") ||
-        lower.endsWith(".odt") || lower.endsWith(".rtf") || lower.endsWith(".md") ||
-        lower.endsWith(".markdown") || lower.endsWith(".txt") || lower.endsWith(".log")) key = "doc";
-    else if (mime.startsWith("video/") ||
-        lower.endsWith(".mp4") || lower.endsWith(".webm") || lower.endsWith(".mov") ||
-        lower.endsWith(".mkv") || lower.endsWith(".avi") || lower.endsWith(".m4v")) key = "video";
-    else if (mime.startsWith("audio/") ||
-        lower.endsWith(".mp3") || lower.endsWith(".wav") || lower.endsWith(".m4a") ||
-        lower.endsWith(".ogg") || lower.endsWith(".flac") || lower.endsWith(".aac")) key = "audio";
-    else if (lower.endsWith(".js") || lower.endsWith(".jsx") || lower.endsWith(".ts") ||
-        lower.endsWith(".tsx") || lower.endsWith(".py") || lower.endsWith(".rb") ||
-        lower.endsWith(".go") || lower.endsWith(".rs") || lower.endsWith(".java") ||
-        lower.endsWith(".c") || lower.endsWith(".h") || lower.endsWith(".cpp") ||
-        lower.endsWith(".hpp") || lower.endsWith(".cs") || lower.endsWith(".php") ||
-        lower.endsWith(".swift") || lower.endsWith(".kt") || lower.endsWith(".sh") ||
-        lower.endsWith(".bash") || lower.endsWith(".zsh") || lower.endsWith(".sql") ||
-        lower.endsWith(".json") || lower.endsWith(".yml") || lower.endsWith(".yaml") ||
-        lower.endsWith(".toml") || lower.endsWith(".xml") || lower.endsWith(".html") ||
-        lower.endsWith(".css") || lower.endsWith(".scss") || lower.endsWith(".vue") ||
-        lower.endsWith(".svelte") || lower.endsWith(".lua") || lower.endsWith(".pl") ||
-        lower.endsWith(".r") || lower.endsWith(".dart")) key = "code";
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="${px}" height="${px}" viewBox="0 0 24 24" ` +
-      `fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" ` +
-      `stroke-linejoin="round" aria-hidden="true">${DOC_ICON_PATHS[key]}</svg>`;
+  function _fileIcon(name) {
+    return Clacky.WorkspaceView.fileIcon(name || "");
   }
 
   // Single source of truth for the file-attachment chip in a user bubble.
   // Both the optimistic send path and the history/live replay paths render
   // through here, so a badge never renders two different ways for one file.
-  function _attachmentBadge(name, mimeType) {
+  function _attachmentBadge(name, mimeType, filePath) {
     const fname = name || "file";
     const lower = fname.toLowerCase();
     const ext   = (fname.split(".").pop() || "file").toUpperCase();
     // ".tar.gz" would otherwise show as just GZ
     const displayExt = lower.endsWith(".tar.gz") ? "TAR.GZ" : ext;
-    return `<span class="msg-pdf-badge">` +
-      `<span class="msg-pdf-badge-icon">${_docTypeIcon(mimeType, fname, 18)}</span>` +
+    const tag = filePath ? "button" : "span";
+    const attrs = filePath
+      ? ` type="button" class="msg-pdf-badge msg-file-open" data-file-path="${encodeURIComponent(filePath)}"`
+      : ` class="msg-pdf-badge"`;
+    return `<${tag}${attrs}>` +
+      `<span class="msg-pdf-badge-icon">${_fileIcon(fname)}</span>` +
       `<span class="msg-pdf-badge-info">` +
         `<span class="msg-pdf-badge-name">${escapeHtml(fname)}</span>` +
         `<span class="msg-pdf-badge-type">${escapeHtml(displayExt)}</span>` +
       `</span>` +
-    `</span>`;
+    `</${tag}>`;
   }
 
   // Compress an image File/Blob to a data URL within MAX_IMAGE_BYTES_SEND.
@@ -884,6 +827,28 @@ const Sessions = (() => {
     return IMAGE_MIME_BY_EXT[ext] || "";
   }
 
+  const IMAGE_FILE_EXTENSIONS = new Set([
+    "png", "jpg", "jpeg", "gif", "webp", "bmp", "svg", "ico", "avif", "heic", "tif", "tiff"
+  ]);
+
+  function _isImageAttachment(file) {
+    const mime = String(file?.mime_type || file?.type || "").toLowerCase();
+    const ext = String(file?.name || "").split(".").pop().toLowerCase();
+    return mime.startsWith("image/") || IMAGE_FILE_EXTENSIONS.has(ext);
+  }
+
+  function _attachmentImageUrl(filePath) {
+    if (!filePath) return "";
+    const path = window.Clacky?.Workspace?.absPath
+      ? Clacky.Workspace.absPath(filePath)
+      : filePath;
+    return `/api/local-image?path=${encodeURIComponent(path)}`;
+  }
+
+  function _openAttachment(filePath) {
+    return !!(filePath && window.Clacky?.WorkspaceView?.openFile(filePath));
+  }
+
   // Stage a file the caller only knows by path — the Files tab hands over the
   // entries listed by /api/sessions/:id/files. The path itself travels with the
   // message (no /api/upload copy), so the agent parses the file where it lives.
@@ -926,7 +891,7 @@ const Sessions = (() => {
       const removeBtn = document.createElement("button");
       removeBtn.className = "img-preview-remove";
       removeBtn.textContent = "✕";
-      removeBtn.title = "Remove";
+      removeBtn.title = I18n.t("tooltip.remove");
       removeBtn.addEventListener("click", () => {
         _pendingImages.splice(idx, 1);
         _renderAttachmentPreviews();
@@ -936,15 +901,44 @@ const Sessions = (() => {
       strip.appendChild(item);
     });
 
-    // Render file cards (PDF, ZIP, DOC, XLS, PPT, etc.)
+    // Render path-backed images as thumbnails, matching uploaded images while
+    // preserving their original attachment path in the outgoing payload.
     _pendingFiles.forEach((f, idx) => {
+      if (_isImageAttachment(f)) {
+        const item = document.createElement("div");
+        item.className = "img-preview-item";
+        item.title = f.name;
+        const thumbnail = document.createElement("img");
+        thumbnail.className = "img-preview-thumb";
+        thumbnail.src = _attachmentImageUrl(f.path);
+        thumbnail.alt = f.name;
+        const removeBtn = document.createElement("button");
+        removeBtn.className = "img-preview-remove";
+        removeBtn.textContent = "✕";
+        removeBtn.title = I18n.t("tooltip.remove");
+        removeBtn.addEventListener("click", () => {
+          _pendingFiles.splice(idx, 1);
+          _renderAttachmentPreviews();
+        });
+        item.appendChild(thumbnail);
+        item.appendChild(removeBtn);
+        strip.appendChild(item);
+        return;
+      }
+
+      // PDF, ZIP, DOC, XLS, PPT, etc. open through the existing Files viewer.
       const item = document.createElement("div");
-      item.className = "pdf-preview-item";
+      item.className = "pdf-preview-item pdf-preview-item--clickable";
       item.title = f.name;
 
+      const openBtn = document.createElement("button");
+      openBtn.type = "button";
+      openBtn.className = "pdf-preview-open";
+      openBtn.addEventListener("click", () => _openAttachment(f.path));
+
       const icon = document.createElement("div");
       icon.className = "pdf-preview-icon";
-      icon.innerHTML = _docTypeIcon(f.mime_type, f.name, 22);
+      icon.innerHTML = _fileIcon(f.name);
 
       const info = document.createElement("div");
       info.className = "pdf-preview-info";
@@ -966,14 +960,15 @@ const Sessions = (() => {
       const removeBtn = document.createElement("button");
       removeBtn.className = "pdf-preview-remove";
       removeBtn.textContent = "✕";
-      removeBtn.title = "Remove";
+      removeBtn.title = I18n.t("tooltip.remove");
       removeBtn.addEventListener("click", () => {
         _pendingFiles.splice(idx, 1);
         _renderAttachmentPreviews();
       });
 
-      item.appendChild(icon);
-      item.appendChild(info);
+      openBtn.appendChild(icon);
+      openBtn.appendChild(info);
+      item.appendChild(openBtn);
       item.appendChild(removeBtn);
       strip.appendChild(item);
     });
@@ -1049,6 +1044,7 @@ const Sessions = (() => {
     }];
   }
 
+  // answered: i18n status key of a closed card, or falsy while it awaits input.
   function _buildFeedbackCard(list, context, answered) {
     // Multiple open questions are walked one at a time. A submitted card is a
     // read-only record, so it stacks instead — hiding past questions there
@@ -1098,7 +1094,7 @@ const Sessions = (() => {
       html += `</div>`;
     });
 
-    html += `<div class="feedback-actions"><span class="feedback-status">${escapeHtml(I18n.t(answered ? "chat.feedback_answered" : "chat.feedback_waiting"))}</span>`;
+    html += `<div class="feedback-actions"><span class="feedback-status">${escapeHtml(I18n.t(answered || "chat.feedback_waiting"))}</span>`;
     if (stepped) {
       html += `<button class="feedback-nav-btn feedback-back-btn" disabled>` +
               `${escapeHtml(I18n.t("chat.feedback_back"))}</button>` +
@@ -1258,9 +1254,10 @@ const Sessions = (() => {
   function _buildUserBubbleHtml(ev) {
     let html = "";
     const images = Array.isArray(ev.images) ? ev.images : [];
+    const attachments = Array.isArray(ev.attachments) ? ev.attachments : [];
     if (Array.isArray(ev.references) && ev.references.length > 0) {
       html += ev.references.map(_renderMentionBadge).join(" ");
-      if (ev.content || images.length > 0) html += "<br>";
+      if (ev.content || images.length > 0 || attachments.length > 0) html += "<br>";
     }
     if (images.length > 0) {
       html += images.map(src => {
@@ -1277,6 +1274,11 @@ const Sessions = (() => {
         }
         return `<img src="${escapeHtml(src)}" alt="image" class="msg-image-thumb">`;
       }).join("");
+      if (attachments.length > 0) html += " ";
+      else if (ev.content) html += "<br>";
+    }
+    if (attachments.length > 0) {
+      html += attachments.map(file => _attachmentBadge(file.name, file.type, file.path)).join(" ");
       if (ev.content) html += "<br>";
     }
     return html + SkillAC.renderUserMessageHtml(ev.content || "", ev.skill_command, ev.skill_command_display);
@@ -1350,8 +1352,11 @@ const Sessions = (() => {
       bubbleHtml = thumbs + (bubbleHtml ? "<br>" + bubbleHtml : "");
     }
     if (_pendingFiles.length > 0) {
-      const badges = _pendingFiles.map(f => _attachmentBadge(f.name, f.mime_type)).join(" ");
-      bubbleHtml = badges + (bubbleHtml ? "<br>" + bubbleHtml : "");
+      const attachments = _pendingFiles.map(f => _isImageAttachment(f)
+        ? `<img src="${_attachmentImageUrl(f.path)}" alt="${escapeHtml(f.name)}" class="msg-image-thumb">`
+        : _attachmentBadge(f.name, f.mime_type, f.path)
+      ).join(" ");
+      bubbleHtml = attachments + (bubbleHtml ? "<br>" + bubbleHtml : "");
     }
     Sessions.appendMsg("user", bubbleHtml, { time: new Date() });
 
@@ -1423,8 +1428,14 @@ const Sessions = (() => {
         },
       });
     }
-    // contenteditable composer: chip deletion, plain-text paste, Shift+Enter.
-    Composer.init($("user-input"));
+    // contenteditable composer: chip deletion, plain-text paste, Shift+Enter,
+    // and ArrowUp/Down recall of this session's sent messages.
+    Composer.init($("user-input"), {
+      getHistory: () => Array.from(
+        RenderTarget.outer().querySelectorAll(".msg-user-wrap .msg-user"),
+        el => _extractUserBubbleText(el)
+      ).filter(Boolean),
+    });
     setInterval(_renderFeedbackCountdown, 250);
     document.addEventListener("input", (e) => {
       if (e.target.closest?.("#user-input, .feedback-free-text")) _interveneFeedbackCountdown();
@@ -1529,11 +1540,14 @@ const Sessions = (() => {
       e.target.value = "";
     });
 
-    // The full chat panel accepts session references and file attachments.
+    // The chat column accepts session references and file attachments. The
+    // session aside is deliberately excluded so workspace drops keep their
+    // own behaviour.
     Composer.bindDropZone({
-      zone: document.getElementById("chat-panel"),
+      zone: document.getElementById("chat-main"),
       input: $("user-input"),
       onFiles: files => files.forEach(_addAttachmentFile),
+      onWorkspaceFile: attachWorkspaceFile,
     });
 
     document.getElementById("user-input").addEventListener("paste", (e) => {
@@ -2235,7 +2249,7 @@ const Sessions = (() => {
         const rfList = _normalizeFeedbackQuestions(ev.questions, ev.question, ev.options);
         if (rfList.length === 0) break;
 
-        container.appendChild(_buildFeedbackCard(rfList, rfContext, ev._answered === true));
+        container.appendChild(_buildFeedbackCard(rfList, rfContext, ev._answered || null));
         break;
       }
 
@@ -2330,19 +2344,20 @@ const Sessions = (() => {
       const events = data.events || [];
       let lastRoundError = null;
 
-      // Pre-scan: mark each request_feedback as answered.
-      // A feedback card is disabled as soon as any subsequent history_user_message appears
-      // (user either clicked an option or typed a reply).
+      // Pre-scan: a feedback card stays open only while nothing follows it.
+      // A user message means it was answered; any later agent activity means
+      // the agent decided on its own (auto-approve timeout, interrupt, error).
       {
+        const agentActs = ["assistant_message", "tool_call", "request_feedback", "subagent_start", "error"];
         let lastFeedbackIdx = -1;
         events.forEach((ev, i) => {
           if (ev.type === "history_user_message") lastRoundError = null;
           if (ev.type === "error") lastRoundError = ev;
-          if (ev.type === "request_feedback") { ev._answered = !!data.has_after; lastFeedbackIdx = i; }
-          if (ev.type === "history_user_message" && lastFeedbackIdx >= 0 && i > lastFeedbackIdx) {
-            events[lastFeedbackIdx]._answered = true;
+          if (lastFeedbackIdx >= 0 && (ev.type === "history_user_message" || agentActs.includes(ev.type))) {
+            events[lastFeedbackIdx]._answered = ev.type === "history_user_message" ? "chat.feedback_answered" : "chat.feedback_timeout";
             lastFeedbackIdx = -1;
           }
+          if (ev.type === "request_feedback") { ev._answered = data.has_after ? "chat.feedback_answered" : null; lastFeedbackIdx = i; }
         });
       }
 
@@ -2415,6 +2430,10 @@ const Sessions = (() => {
         // Restore transient UI state based on session status after initial load
         // (not prepend, which is scroll-up pagination — no need to re-restore then)
         if (!prepend && !state.hasAfter) {
+          if (_unseenSummary?.id === id) {
+            Sessions.appendCompleteSummary(_unseenSummary.ev);
+            _unseenSummary = null;
+          }
           const session = _sessions.find(s => s.id === id);
           if (session) {
             if (session.status === "running") {
@@ -3007,6 +3026,8 @@ const Sessions = (() => {
     activeClass,
     distanceProperty,
     durationProperty,
+    fadeClass = null,
+    fadeDelay = 300,
     revealPadding = 16,
     measureDelay = 170,
   }) {
@@ -3015,8 +3036,10 @@ const Sessions = (() => {
     if (!viewport || !content) return;
 
     let measureTimer = null;
+    let fadeTimer = null;
     item.addEventListener("pointerenter", () => {
       clearTimeout(measureTimer);
+      clearTimeout(fadeTimer);
       measureTimer = setTimeout(() => {
         const overflow = content.scrollWidth - viewport.clientWidth;
         if (overflow <= 1) return;
@@ -3028,12 +3051,17 @@ const Sessions = (() => {
         item.style.setProperty(distanceProperty, `${distance}px`);
         item.style.setProperty(durationProperty, `${duration}s`);
         item.classList.add(activeClass);
+        // Mirrors the CSS transition delay: a leading fade that shows up first
+        // would dim the opening glyphs before they start moving.
+        if (fadeClass) fadeTimer = setTimeout(() => item.classList.add(fadeClass), fadeDelay);
       }, measureDelay);
     });
     item.addEventListener("pointerleave", () => {
       clearTimeout(measureTimer);
+      clearTimeout(fadeTimer);
       measureTimer = null;
       item.classList.remove(activeClass);
+      if (fadeClass) item.classList.remove(fadeClass);
       item.style.removeProperty(distanceProperty);
       item.style.removeProperty(durationProperty);
     });
@@ -3047,6 +3075,7 @@ const Sessions = (() => {
       viewportSelector: ".session-name__text",
       contentSelector: ".session-name__content",
       activeClass: "session-name-scrolling",
+      fadeClass: "session-name-leading-fade",
       distanceProperty: "--session-name-scroll-distance",
       durationProperty: "--session-name-scroll-duration",
     });
@@ -3406,6 +3435,15 @@ const Sessions = (() => {
       // Local deployments (localhost / 127.0.0.1 / ::1): open the file with the
       // OS default handler.  Remote deployments: download the file.
       document.addEventListener("click", async (e) => {
+        const attachment = e.target.closest?.(".msg-file-open[data-file-path]");
+        if (attachment) {
+          e.preventDefault();
+          let filePath = attachment.dataset.filePath || "";
+          try { filePath = decodeURIComponent(filePath); } catch (_) { /* use raw path */ }
+          _openAttachment(filePath);
+          return;
+        }
+
         // Localhost dev-server URLs open in the preview panel instead of a new
         // tab (local deployments only — the proxy can't reach a remote user's
         // localhost). Links that belong to the platform (not a dev server) opt
@@ -3607,18 +3645,26 @@ const Sessions = (() => {
      *  No-op for the session the user is already looking at. */
     markDone(id) {
       if (!id || id === _activeId) return;
-      clearTimeout(_recentlyDone.get(id));
-      _recentlyDone.set(id, setTimeout(() => {
+      clearTimeout(_recentlyDone.get(id)?.timer);
+      _recentlyDone.set(id, { summary: null, timer: setTimeout(() => {
         _recentlyDone.delete(id);
         Sessions.renderList();
-      }, DONE_DOT_TTL));
+      }, DONE_DOT_TTL) });
+    },
+
+    /** Keep the turn's "complete" payload with its done dot until the session is opened. */
+    markDoneSummary(id, ev) {
+      const done = _recentlyDone.get(id);
+      if (done) done.summary = ev;
     },
 
+    /** Drop the done dot; returns its unseen summary (or null). */
     clearDone(id) {
-      if (!_recentlyDone.has(id)) return false;
-      clearTimeout(_recentlyDone.get(id));
+      const done = _recentlyDone.get(id);
+      if (!done) return null;
+      clearTimeout(done.timer);
       _recentlyDone.delete(id);
-      return true;
+      return done.summary;
     },
 
     /** Remove a session from the list (from session_deleted event). */
@@ -4025,7 +4071,8 @@ const Sessions = (() => {
     _setActiveId(id) {
       const oldId = _activeId;
       _activeId = id;
-      Sessions.clearDone(id);
+      const summary = Sessions.clearDone(id);
+      _unseenSummary = summary ? { id, ev: summary } : null;
       // Cancel any pending "all done" hide timer from the previous session —
       // it shouldn't fire on the new one.
       if (Sessions._todoClearTimer) {
@@ -4709,7 +4756,6 @@ const Sessions = (() => {
       const sibDirText = $("sib-dir-text");
       if (sibDir && sibDirText) {
         sibDirText.textContent = s.working_dir ? _compactWorkingDir(s.working_dir) : "";
-        sibDir.title = `${s.working_dir} (${I18n.t("sib.dir.tooltip")})`;
         sibDir.hidden = !s.working_dir;
         if (s.working_dir) {
           sibDir.dataset.workingDir = s.working_dir;
@@ -4736,7 +4782,7 @@ const Sessions = (() => {
         }
         sibMode.dataset.sessionId = s.id;
         sibMode.disabled = false;
-        sibMode.title = I18n.t("sib.mode.tooltip");
+        sibMode.setAttribute("data-tooltip", I18n.t("sib.mode.tooltip"));
         sibMode.style.display = "";
       }
       if (sibSepAfterMode) {
@@ -4772,9 +4818,9 @@ const Sessions = (() => {
         sibModel.classList.toggle("sib-model-no-subs", (s.sub_model_options || []).length <= 1);
         const busy = s.status === "running";
         sibModel.classList.toggle("sib-model-disabled", busy);
-        sibModel.title = busy
+        sibModel.setAttribute("data-tooltip", busy
           ? I18n.t("sib.model.tooltip.busy")
-          : I18n.t("sib.model.tooltip");
+          : I18n.t("sib.model.tooltip"));
       }
       if (sibModelWrap) sibModelWrap.style.display = s.model ? "" : "none";
 
@@ -5226,6 +5272,36 @@ const Sessions = (() => {
       }
     },
 
+    /** Render the end-of-turn "✓ Done" summary from a `complete` payload. */
+    appendCompleteSummary(ev) {
+      const costSource = ev.cost_source;
+      const symbol = typeof Billing !== "undefined" ? Billing.getCurrencySymbol() : "$";
+      const rawCost = ev.cost || 0;
+      const cost = typeof Billing !== "undefined" ? Billing.convertCost(rawCost) : rawCost;
+      const costDisplay = (!costSource || costSource === "estimated")
+        ? "N/A"
+        : `${symbol}${cost.toFixed(4)}`;
+      let mainLine = I18n.t("chat.done", { n: ev.iterations, cost: costDisplay });
+      if (typeof ev.duration === "number" && ev.duration > 0) {
+        mainLine += I18n.t("chat.done.duration", { duration: ev.duration.toFixed(1) });
+      }
+      let cacheLine = null;
+      const cs = ev.cache_stats;
+      const total = cs && (cs.total_requests || cs["total_requests"]);
+      const hits = cs && (cs.cache_hit_requests || cs["cache_hit_requests"]);
+      const cachedTokens = cs && (cs.cache_read_input_tokens || cs["cache_read_input_tokens"]);
+      if (total && total > 0 && cachedTokens && cachedTokens > 0) {
+        const rate = ((hits / total) * 100).toFixed(1);
+        const tokensFmt = cachedTokens >= 1000
+          ? `${(cachedTokens / 1000).toFixed(1)}k`
+          : `${cachedTokens}`;
+        cacheLine = I18n.t("chat.done.cache", {
+          rate, hits, total: total, tokens: tokensFmt
+        });
+      }
+      Sessions.appendInfo(`✓ ${mainLine}`, cacheLine);
+    },
+
     appendInfo(text, subline) {
       Sessions.collapseToolGroup();
       const messages = RenderTarget.current();
@@ -5632,6 +5708,7 @@ const Sessions = (() => {
           viewportSelector: ".todo-text",
           contentSelector: ".todo-text__content",
           activeClass: "todo-text-scrolling",
+          fadeClass: "todo-text-leading-fade",
           distanceProperty: "--todo-text-scroll-distance",
           durationProperty: "--todo-text-scroll-duration",
           revealPadding: 12,
@@ -7112,7 +7189,6 @@ const Sessions = (() => {
       const sibDirText = $("sib-dir-text");
       if (sibDir && sibDirText) {
         sibDirText.textContent = newDir;
-        sibDir.title = `${newDir} (${I18n.t("sib.dir.tooltip")})`;
         sibDir.dataset.workingDir = newDir;
       }