openclacky 1.0.0 → 1.0.2

data/lib/clacky/web/sessions.js

@@ -304,6 +304,571 @@ const Sessions = (() => {
     });
   }
 
+  // ── New session controls (split button + welcome + modal) ──────────────
+  //
+  // Wires up every button/interaction that kicks off session creation:
+  //   - "+ New Session" inline split-button (quick create)
+  //   - "▾" arrow button (opens dropdown → advanced options modal)
+  //   - "+ New Session" big button on the welcome screen
+  //   - New Session Modal: close / cancel / create / overlay click / browse
+  //   - Load-more button (rendered dynamically by renderList)
+  //
+  // All elements below are static in index.html and therefore must exist —
+  // we call addEventListener directly (no ?. / no `if` guards). If any is
+  // missing, it means HTML and JS drifted and we want the loud error.
+  function _initNewSessionControls() {
+    // Split button: main (quick create)
+    document.getElementById("btn-new-session-inline")
+      .addEventListener("click", () => Sessions.create("general"));
+
+    // Split button: arrow (toggle dropdown)
+    document.getElementById("btn-new-session-arrow")
+      .addEventListener("click", (e) => {
+        e.stopPropagation();
+        const dd = document.getElementById("new-session-dropdown");
+        dd.hidden = !dd.hidden;
+      });
+
+    // Dropdown item "Advanced Options…" — delegated because the dropdown
+    // panel may be re-rendered; this keeps the binding stable.
+    document.addEventListener("click", (e) => {
+      if (e.target && e.target.id === "btn-new-session-modal") {
+        e.stopPropagation();
+        document.getElementById("new-session-dropdown").hidden = true;
+        Sessions.openNewSessionModal();
+      }
+    });
+
+    // Close dropdown when clicking anywhere else
+    document.addEventListener("click", () => {
+      const dd = document.getElementById("new-session-dropdown");
+      if (dd && !dd.hidden) dd.hidden = true;
+    });
+
+    // Welcome screen "+ New Session" button
+    document.getElementById("btn-welcome-new")
+      .addEventListener("click", () => Sessions.create("general"));
+
+    // Modal: close / cancel / create / overlay click
+    document.getElementById("new-session-modal-close")
+      .addEventListener("click", () => Sessions.closeNewSessionModal());
+    document.getElementById("new-session-cancel")
+      .addEventListener("click", () => Sessions.closeNewSessionModal());
+    document.getElementById("new-session-create")
+      .addEventListener("click", () => Sessions.createFromModal());
+    document.getElementById("new-session-modal")
+      .addEventListener("click", (e) => {
+        // Only close when the click lands on the overlay itself, not on
+        // the inner dialog panel.
+        if (e.target.id === "new-session-modal") {
+          Sessions.closeNewSessionModal();
+        }
+      });
+
+    // (Removed dead binding for `new-session-browse-btn` — no such element
+    // exists in index.html. Originally guarded by `if ($(...))`; deleting the
+    // defense exposed that it never ran. Native file-browser picker is not
+    // implemented on the web UI — users type a path directly.)
+
+    // Load-more sessions button is rendered dynamically by renderList(),
+    // so we listen via event delegation.
+    document.addEventListener("click", (e) => {
+      if (e.target && e.target.id === "btn-load-more-sessions") {
+        Sessions.loadMore();
+      }
+    });
+  }
+
+  // ── Composer: attachments, send button, and sendMessage ────────────────
+  //
+  // Everything below is the "composer" — the input box at the bottom of
+  // the chat panel and the user-attached image/file pipeline. It owns:
+  //   - In-memory staging buffers for pending images and files (_pendingImages / _pendingFiles)
+  //   - Client-side image compression (scale down + progressive JPEG quality)
+  //   - File upload via POST /api/upload (documents only, not images)
+  //   - Preview strip rendering (image thumbnails + file cards)
+  //   - Drag-drop, paste, and "+ attach" button → file pipeline
+  //   - sendMessage() — assembles content + files and dispatches over WS
+  //
+  // Scope: everything here is strictly session-scoped. The pending buffers
+  // are cleared on each send. There is no "draft" persistence across sessions.
+  //
+  // Bindings set up by _initComposer() — wired in Sessions.init() below.
+
+  const _pendingImages = [];
+  const _pendingFiles  = [];
+  const MAX_IMAGE_SIZE        = 5 * 1024 * 1024;   // 5 MB — hard reject before compression
+  const MAX_IMAGE_BYTES_SEND  = 512 * 1024;         // 512 KB — target after compression
+  const MAX_IMAGE_LONG_EDGE   = 1920;               // px — scale down if larger
+  const MAX_FILE_BYTES = 32 * 1024 * 1024;  // 32 MB
+  const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"];
+  const ACCEPTED_DOC_TYPES   = [
+    "application/pdf",
+    "application/zip",
+    "application/x-zip-compressed",
+    "application/gzip",
+    "application/x-gzip",
+    "application/x-tar",
+    "application/x-compressed-tar",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document", // .docx
+    "application/msword",                                                        // .doc
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",        // .xlsx
+    "application/vnd.ms-excel",                                                  // .xls
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation", // .pptx
+    "application/vnd.ms-powerpoint",                                             // .ppt
+    "text/csv",                                                                  // .csv
+    "application/csv",                                                           // .csv (some browsers)
+    "text/markdown",                                                             // .md
+    "text/x-markdown",                                                           // .md (some browsers)
+    "text/plain",                                                                // .md / .txt (many browsers report this)
+  ];
+
+  // Extension-based fallback for files whose MIME type is missing or unreliable.
+  // Browsers frequently report "" or "application/octet-stream" for .md / .tar.gz.
+  const ACCEPTED_DOC_EXTENSIONS = [
+    ".pdf", ".zip",
+    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx",
+    ".csv",
+    ".md", ".markdown", ".txt", ".log",
+    ".tar", ".gz", ".tgz", ".tar.gz", ".rar", ".7z"
+  ];
+
+  function _hasAcceptedDocExt(filename) {
+    const lower = (filename || "").toLowerCase();
+    return ACCEPTED_DOC_EXTENSIONS.some(ext => lower.endsWith(ext));
+  }
+
+  function _isAcceptedDoc(file) {
+    if (!file) return false;
+    if (file.type && ACCEPTED_DOC_TYPES.includes(file.type)) return true;
+    return _hasAcceptedDocExt(file.name);
+  }
+
+  function _isAcceptedImage(file) {
+    if (!file) return false;
+    return ACCEPTED_IMAGE_TYPES.includes(file.type);
+  }
+
+  function _isAcceptedFile(file) {
+    return _isAcceptedImage(file) || _isAcceptedDoc(file);
+  }
+
+  function _docTypeIcon(mimeType, filename) {
+    const lower = (filename || "").toLowerCase();
+    if (mimeType === "application/pdf" || lower.endsWith(".pdf")) return "📄";
+    if (mimeType === "application/zip" || mimeType === "application/x-zip-compressed" || lower.endsWith(".zip")) return "🗜️";
+    if (mimeType === "application/gzip" || mimeType === "application/x-gzip" ||
+        mimeType === "application/x-tar" || mimeType === "application/x-compressed-tar" ||
+        lower.endsWith(".tar") || lower.endsWith(".gz") || lower.endsWith(".tgz") || lower.endsWith(".tar.gz") ||
+        lower.endsWith(".rar") || lower.endsWith(".7z")) return "🗜️";
+    if ((mimeType && mimeType.includes("wordprocessingml")) || mimeType === "application/msword" ||
+        lower.endsWith(".doc") || lower.endsWith(".docx")) return "📝";
+    if ((mimeType && mimeType.includes("spreadsheetml")) || mimeType === "application/vnd.ms-excel" ||
+        lower.endsWith(".xls") || lower.endsWith(".xlsx")) return "📊";
+    if ((mimeType && mimeType.includes("presentationml")) || mimeType === "application/vnd.ms-powerpoint" ||
+        lower.endsWith(".ppt") || lower.endsWith(".pptx")) return "📋";
+    if (mimeType === "text/csv" || mimeType === "application/csv" || lower.endsWith(".csv")) return "📊";
+    if (mimeType === "text/markdown" || mimeType === "text/x-markdown" ||
+        lower.endsWith(".md") || lower.endsWith(".markdown")) return "📝";
+    if (mimeType === "text/plain" || lower.endsWith(".txt") || lower.endsWith(".log")) return "📄";
+    return "📎";
+  }
+
+  // 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.
+  // GIF is not compressible via Canvas — rendered as JPEG (LLMs only see first frame anyway).
+  function _compressImage(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = () => reject(new Error("Failed to read image"));
+      reader.onload = e => {
+        const img = new Image();
+        img.onerror = () => reject(new Error("Failed to decode image"));
+        img.onload = () => {
+          // Scale down if needed
+          let { width, height } = img;
+          if (width > MAX_IMAGE_LONG_EDGE || height > MAX_IMAGE_LONG_EDGE) {
+            const ratio = Math.min(MAX_IMAGE_LONG_EDGE / width, MAX_IMAGE_LONG_EDGE / height);
+            width  = Math.round(width  * ratio);
+            height = Math.round(height * ratio);
+          }
+
+          const canvas = document.createElement("canvas");
+          canvas.width  = width;
+          canvas.height = height;
+          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);
+          }
+          resolve(dataUrl);
+        };
+        img.src = e.target.result;
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  function _addImageFile(file) {
+    if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
+      alert(`Unsupported image type: ${file.type}\nSupported: PNG, JPEG, GIF, WEBP`);
+      return;
+    }
+    if (file.size > MAX_IMAGE_SIZE) {
+      alert(`Image too large: ${file.name} (max 5 MB)`);
+      return;
+    }
+    _compressImage(file)
+      .then(dataUrl => {
+        _pendingImages.push({ dataUrl, name: file.name, mimeType: "image/jpeg" });
+        _renderAttachmentPreviews();
+      })
+      .catch(err => alert(`Image processing failed: ${err.message}`));
+  }
+
+  function _addGenericFile(file) {
+    if (file.size > MAX_FILE_BYTES) {
+      alert(`File too large: ${file.name} (max 32 MB)`);
+      return;
+    }
+    // Upload file to server via HTTP — only the path is returned, no base64 in memory
+    const formData = new FormData();
+    formData.append("file", file);
+    fetch("/api/upload", { method: "POST", body: formData })
+      .then(r => r.json())
+      .then(data => {
+        if (!data.ok) { alert(`Upload failed: ${data.error}`); return; }
+        _pendingFiles.push({
+          name:      data.name,
+          path:      data.path,
+          mime_type: file.type
+        });
+        _renderAttachmentPreviews();
+        setTimeout(() => $("user-input").focus(), 100);
+      })
+      .catch(err => alert(`Upload error: ${err.message}`));
+  }
+
+  function _addAttachmentFile(file) {
+    // Route by content category. Images must match known image MIME types
+    // (MIME is reliable for images). Documents fall back to extension-based
+    // detection because browsers frequently report "" or "application/octet-stream"
+    // for .md / .tar.gz files.
+    if (_isAcceptedImage(file)) {
+      _addImageFile(file);
+    } else if (_isAcceptedDoc(file)) {
+      _addGenericFile(file);
+    } else {
+      alert(`Unsupported file: ${file.name}\nSupported: images (PNG/JPG/GIF/WEBP), PDF, Office (DOC/XLS/PPT), ZIP, TAR, TAR.GZ, MD, TXT, CSV`);
+    }
+  }
+
+  function _renderAttachmentPreviews() {
+    const strip = $("image-preview-strip");
+    strip.innerHTML = "";
+    const hasContent = _pendingImages.length > 0 || _pendingFiles.length > 0;
+    if (!hasContent) {
+      strip.style.display = "none";
+      return;
+    }
+    strip.style.display = "flex";
+
+    // Render image thumbnails
+    _pendingImages.forEach((img, idx) => {
+      const item = document.createElement("div");
+      item.className = "img-preview-item";
+      item.title = img.name;
+      const thumbnail = document.createElement("img");
+      thumbnail.src = img.dataUrl;
+      thumbnail.alt = img.name;
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "img-preview-remove";
+      removeBtn.textContent = "✕";
+      removeBtn.title = "Remove";
+      removeBtn.addEventListener("click", () => {
+        _pendingImages.splice(idx, 1);
+        _renderAttachmentPreviews();
+      });
+      item.appendChild(thumbnail);
+      item.appendChild(removeBtn);
+      strip.appendChild(item);
+    });
+
+    // Render file cards (PDF, ZIP, DOC, XLS, PPT, etc.)
+    _pendingFiles.forEach((f, idx) => {
+      const item = document.createElement("div");
+      item.className = "pdf-preview-item";
+      item.title = f.name;
+
+      const icon = document.createElement("div");
+      icon.className = "pdf-preview-icon";
+      icon.textContent = _docTypeIcon(f.mime_type, f.name);
+
+      const info = document.createElement("div");
+      info.className = "pdf-preview-info";
+
+      const name = document.createElement("div");
+      name.className = "pdf-preview-name";
+      name.textContent = f.name;
+
+      const typeLabel = document.createElement("div");
+      typeLabel.className = "pdf-preview-type";
+      const _lowerName = (f.name || "").toLowerCase();
+      typeLabel.textContent = _lowerName.endsWith(".tar.gz")
+        ? "TAR.GZ"
+        : (f.name.split(".").pop() || "file").toUpperCase();
+
+      info.appendChild(name);
+      info.appendChild(typeLabel);
+
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "pdf-preview-remove";
+      removeBtn.textContent = "✕";
+      removeBtn.title = "Remove";
+      removeBtn.addEventListener("click", () => {
+        _pendingFiles.splice(idx, 1);
+        _renderAttachmentPreviews();
+      });
+
+      item.appendChild(icon);
+      item.appendChild(info);
+      item.appendChild(removeBtn);
+      strip.appendChild(item);
+    });
+  }
+
+  // ── sendMessage ────────────────────────────────────────────────────────
+  let _sending = false;
+
+  function _sendMessage() {
+    if (_sending) return;
+    const input   = $("user-input");
+    const content = input.value.trim();
+    if (!content && _pendingImages.length === 0 && _pendingFiles.length === 0) return;
+    if (!Sessions.activeId) return;
+
+    if (!WS.ready) {
+      const hint = $("ws-disconnect-hint");
+      if (hint) {
+        hint.textContent = I18n.t("chat.disconnected.hint");
+        hint.style.display = "block";
+        hint.style.opacity = "1";
+        clearTimeout(hint._hideTimer);
+        hint._hideTimer = setTimeout(() => {
+          hint.style.opacity = "0";
+          setTimeout(() => { hint.style.display = "none"; }, 400);
+        }, 2000);
+      }
+      return;
+    }
+
+    _sending = true;
+
+    let bubbleHtml = content ? escapeHtml(content) : "";
+    if (_pendingImages.length > 0) {
+      const thumbs = _pendingImages
+        .map(img => `<img src="${img.dataUrl}" alt="${escapeHtml(img.name)}" class="msg-image-thumb">`)
+        .join("");
+      bubbleHtml = thumbs + (bubbleHtml ? "<br>" + bubbleHtml : "");
+    }
+    if (_pendingFiles.length > 0) {
+      const badges = _pendingFiles.map(f => {
+        const icon = _docTypeIcon(f.mime_type);
+        const ext  = (f.name.split(".").pop() || "file").toUpperCase();
+        return `<span class="msg-pdf-badge">` +
+          `<span class="msg-pdf-badge-icon">${icon}</span>` +
+          `<span class="msg-pdf-badge-info">` +
+            `<span class="msg-pdf-badge-name">${escapeHtml(f.name)}</span>` +
+            `<span class="msg-pdf-badge-type">${escapeHtml(ext)}</span>` +
+          `</span>` +
+        `</span>`;
+      }).join(" ");
+      bubbleHtml = badges + (bubbleHtml ? "<br>" + bubbleHtml : "");
+    }
+    Sessions.appendMsg("user", bubbleHtml, { time: new Date() });
+
+    // Merge images and files into unified files array for WS payload.
+    const files = [
+      ..._pendingImages.map(img => ({
+        name:      img.name,
+        mime_type: img.mimeType || "image/jpeg",
+        data_url:  img.dataUrl
+      })),
+      ..._pendingFiles.map(f => ({
+        name:      f.name,
+        path:      f.path,
+        mime_type: f.mime_type
+      }))
+    ];
+    _pendingImages.length = 0;
+    _pendingFiles.length  = 0;
+    _renderAttachmentPreviews();
+
+    WS.send({ type: "message", session_id: Sessions.activeId, content, files });
+    input.value        = "";
+    input.style.height = "auto";
+    setTimeout(() => { _sending = false; }, 300);
+  }
+
+  // ── Composer bindings ──────────────────────────────────────────────────
+  // Wires up the send button, attach button, file picker, drag-drop, paste,
+  // and IME composition tracking. All targets are static in index.html.
+  function _initComposer() {
+    // Send & attach buttons
+    document.getElementById("btn-send").addEventListener("click", _sendMessage);
+    document.getElementById("btn-attach")
+      .addEventListener("click", () => document.getElementById("image-file-input").click());
+
+    // Hidden <input type="file"> — triggered by btn-attach.
+    document.getElementById("image-file-input").addEventListener("change", (e) => {
+      Array.from(e.target.files).forEach(_addAttachmentFile);
+      e.target.value = "";
+    });
+
+    // Drag-drop onto the whole input area.
+    const inputArea = document.getElementById("input-area");
+    inputArea.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      inputArea.classList.add("drag-over");
+    });
+    inputArea.addEventListener("dragleave", (e) => {
+      if (!inputArea.contains(e.relatedTarget)) inputArea.classList.remove("drag-over");
+    });
+    inputArea.addEventListener("drop", (e) => {
+      e.preventDefault();
+      inputArea.classList.remove("drag-over");
+      const files = Array.from(e.dataTransfer.files).filter(_isAcceptedFile);
+      if (files.length === 0) return;
+      files.forEach(_addAttachmentFile);
+    });
+
+    // Paste handler — images and accepted docs from the clipboard.
+    document.getElementById("user-input").addEventListener("paste", (e) => {
+      const items = Array.from(e.clipboardData?.items || []);
+      // Any file-kind item that's an image, or a document whose type/name
+      // passes our doc filter. Must check name via getAsFile() for .md/.tar.gz
+      // (browsers often leave item.type empty for these).
+      const attachItems = items.filter(it => {
+        if (it.kind !== "file") return false;
+        if (ACCEPTED_IMAGE_TYPES.includes(it.type)) return true;
+        if (ACCEPTED_DOC_TYPES.includes(it.type))   return true;
+        const f = it.getAsFile && it.getAsFile();
+        return f ? _hasAcceptedDocExt(f.name) : false;
+      });
+      if (attachItems.length === 0) return;
+      e.preventDefault();
+      attachItems.forEach(it => _addAttachmentFile(it.getAsFile()));
+    });
+  }
+
+  // ── Search bar bindings ────────────────────────────────────────────────
+  //
+  // All search-related interactions. The search UI lives in the sessions
+  // sidebar: a magnifier toggle button, the search panel (q input, type
+  // <select>, date <input>), inline ✕ clear, and "clear all filters" button.
+  //
+  // Everything uses event delegation because some elements (e.g. the clear
+  // buttons) are re-rendered as filter state changes.
+  function _initSearch() {
+    // Magnifier toggle button
+    document.addEventListener("click", (e) => {
+      if (e.target && e.target.closest("#btn-session-search-toggle")) {
+        Sessions.toggleSearch();
+      }
+    });
+
+    // Close button inside panel
+    document.addEventListener("click", (e) => {
+      if (e.target && e.target.id === "btn-session-search-close") {
+        if (Sessions.searchOpen) Sessions.toggleSearch();
+      }
+    });
+
+    // 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();
+      }
+    });
+
+    // Inline ✕ button — clear the q input and re-fetch
+    document.addEventListener("click", (e) => {
+      if (e.target && e.target.id === "btn-search-q-clear") {
+        const qEl = document.getElementById("session-search-q");
+        if (qEl) qEl.value = "";
+        Sessions.clearFilter("q");
+      }
+    });
+
+    // "Clear all filters" button — resets type + date and re-fetches once
+    document.addEventListener("click", (e) => {
+      if (e.target && e.target.id === "btn-search-clear-all") {
+        const typeEl = document.getElementById("session-search-type");
+        const dateEl = document.getElementById("session-search-date");
+        if (typeEl) typeEl.value = "";
+        if (dateEl) dateEl.value = "";
+        Sessions.commitSearch();
+      }
+    });
+
+    // Show/hide inline ✕ as user types in search input
+    document.addEventListener("input", (e) => {
+      if (e.target && e.target.id === "session-search-q") {
+        const btn = document.getElementById("btn-search-q-clear");
+        if (btn) btn.hidden = !e.target.value;
+      }
+    });
+
+    // Type <select> and date <input> — commit immediately on change
+    // (explicit choices, not free-text typing, so no debouncing needed).
+    document.addEventListener("change", (e) => {
+      if (e.target && (e.target.id === "session-search-type" || e.target.id === "session-search-date")) {
+        Sessions.commitSearch();
+      }
+    });
+  }
+
+  // ── Message history bindings ───────────────────────────────────────────
+  //
+  // Session-scoped interactions inside the chat panel (not tied to a
+  // specific session id at bind time — they look up Sessions.activeId
+  // dynamically):
+  //   - Scroll-to-top on #messages → load older history
+  //   - #btn-interrupt             → WS interrupt
+  //   - #btn-delete-session        → delete current session (legacy — the
+  //     chat-header was removed; the button is now absent in fresh HTML
+  //     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");
+      if (messages.scrollTop < 80 && Sessions.activeId && Sessions.hasMoreHistory(Sessions.activeId)) {
+        Sessions.loadMoreHistory(Sessions.activeId);
+      }
+    });
+
+    // Interrupt button — tells the backend to stop the current task.
+    document.getElementById("btn-interrupt").addEventListener("click", () => {
+      WS.send({ type: "interrupt", session_id: Sessions.activeId });
+    });
+
+    // Legacy delete button (removed from the chat header long ago). Keep a
+    // guarded binding so that custom brand/templates rendering the old
+    // element still work. In the default HTML this is a no-op.
+    const btnDelete = document.getElementById("btn-delete-session");
+    if (btnDelete) {
+      btnDelete.addEventListener("click", () => {
+        if (Sessions.activeId) Sessions.deleteSession(Sessions.activeId);
+      });
+    }
+  }
+
   // ── Tool group helpers ─────────────────────────────────────────────────
   //
   // A "tool group" is a collapsible <div class="tool-group"> that contains
@@ -976,10 +1541,18 @@ const Sessions = (() => {
     get searchOpen() { return _searchOpen; },
     find: id => _sessions.find(s => s.id === id),
 
+    // Composer entry point — called by Skill autocomplete keydown handler
+    // (in app.js) when the user presses Enter without an active completion.
+    // Will be internalised once the Skill autocomplete moves into skills.js.
+    sendMessage: _sendMessage,
     // ── Init ──────────────────────────────────────────────────────────────
     init() {
       _initNewMessageBanner();
       _initEmptyHint();
+      _initNewSessionControls();
+      _initComposer();
+      _initSearch();
+      _initMessageHistory();
       // Re-render session list (badges/labels) when the user switches language
       document.addEventListener("langchange", () => Sessions.renderList());
       // Browsers block file:// navigation from http:// pages. Intercept clicks on
@@ -1911,14 +2484,14 @@ const Sessions = (() => {
 
       card.innerHTML = cardHtml;
 
-      // Click → disable card + submit immediately via sendMessage()
+      // Click → disable card + submit immediately via _sendMessage()
       card.querySelectorAll(".feedback-option-btn").forEach(btn => {
         btn.onclick = () => {
           card.querySelectorAll(".feedback-option-btn").forEach(b => b.disabled = true);
           card.classList.add("feedback-card--submitted");
           const input = $("user-input");
           if (input) input.value = btn.textContent.trim();
-          sendMessage();
+          _sendMessage();
         };
       });
 
@@ -2376,3 +2949,462 @@ const Sessions = (() => {
 
   return Sessions;
 })();
+
+// ─────────────────────────────────────────────────────────────────────────
+// Session Info Bar interactions (model switcher + working-directory switcher
+// + session-actions dropdown). Two self-contained IIFEs that bind themselves
+// on document (event delegation), so no explicit init() call is needed —
+// they just work once this file is loaded.
+//
+// Moved here from app.js verbatim; kept as IIFEs to preserve private state
+// (benchmark cache, open/closed flags) without polluting the Sessions closure.
+// ─────────────────────────────────────────────────────────────────────────
+
+// ── Session Info Bar Model Switcher ───────────────────────────────────────
+(function() {
+  let _isOpen = false;
+  // Cache of the most recent benchmark results, keyed by model_id. Kept at
+  // closure scope so the numbers survive closing & reopening the dropdown —
+  // the user shouldn't have to re-run the test just to peek at results. We
+  // intentionally do NOT persist this to disk: latency is a point-in-time
+  // measurement, and yesterday's numbers are misleading.
+  let _benchCache = {};        // { [model_id]: { ttft_ms, ok, error, ts } }
+  let _benchInFlight = false;  // prevent double-click spam
+
+  // Toggle model dropdown when clicking on model name
+  document.addEventListener("click", async (e) => {
+    const modelEl = e.target.closest("#sib-model");
+    if (modelEl) {
+      e.stopPropagation();
+      const dropdown = $("sib-model-dropdown");
+      if (!dropdown) return;
+
+      if (_isOpen) {
+        dropdown.style.display = "none";
+        _isOpen = false;
+      } else {
+        await _populateModelDropdown(modelEl.dataset.sessionId, modelEl.textContent.trim());
+        
+        // Calculate position relative to the model element (fixed positioning)
+        const rect = modelEl.getBoundingClientRect();
+        dropdown.style.left = `${rect.left + rect.width / 2}px`;
+        dropdown.style.top = `${rect.top - 6}px`; // 6px above the element
+        dropdown.style.transform = "translate(-50%, -100%)"; // Center horizontally, move up by its own height
+        
+        dropdown.style.display = "block";
+        _isOpen = true;
+      }
+      return;
+    }
+
+    // Close dropdown when clicking outside
+    if (_isOpen && !e.target.closest(".sib-model-dropdown")) {
+      const dropdown = $("sib-model-dropdown");
+      if (dropdown) dropdown.style.display = "none";
+      _isOpen = false;
+    }
+  });
+
+  // Populate dropdown with available models
+  async function _populateModelDropdown(sessionId, currentModel) {
+    const dropdown = $("sib-model-dropdown");
+    if (!dropdown) return;
+
+    try {
+      console.log("[Model Switcher] Fetching /api/config...");
+      const res = await fetch("/api/config");
+      const data = await res.json();
+      console.log("[Model Switcher] Received data:", data);
+      const models = data.models || [];
+      console.log("[Model Switcher] Models count:", models.length);
+
+      if (models.length === 0) {
+        dropdown.innerHTML = '<div style="padding:12px;text-align:center;color:var(--color-text-secondary);font-size:11px;">No models configured</div>';
+        return;
+      }
+
+      dropdown.innerHTML = "";
+
+      // ── Benchmark floating button (top-right of dropdown) ──────────────
+      // Tiny ⚡ button pinned to the dropdown's top-right corner. Runs one
+      // concurrent request per model and back-fills each row's latency cell.
+      // We deliberately avoid a full-width banner — it ate visual space that
+      // the model list needs, and most users open the dropdown to SWITCH,
+      // not to benchmark. The floating button is discoverable but unobtrusive.
+      const bench = document.createElement("div");
+      bench.className = "sib-model-bench";
+      const btnLabel   = (typeof I18n !== "undefined") ? I18n.t("sib.bench.btn")     : "Benchmark";
+      const btnTooltip = (typeof I18n !== "undefined") ? I18n.t("sib.bench.tooltip") : "Test response latency for every configured model";
+      bench.innerHTML = `
+        <button type="button" class="sib-bench-btn" title="${btnTooltip}">⚡ <span class="sib-bench-label">${btnLabel}</span></button>
+        <span class="sib-bench-hint"></span>
+      `;
+      dropdown.appendChild(bench);
+
+      const benchBtn   = bench.querySelector(".sib-bench-btn");
+      const benchLabel = bench.querySelector(".sib-bench-label");
+      const benchHint  = bench.querySelector(".sib-bench-hint");
+      benchBtn.addEventListener("click", (ev) => {
+        ev.stopPropagation();
+        _runBenchmark(sessionId, dropdown, benchBtn, benchLabel, benchHint);
+      });
+
+      // ── Model rows ─────────────────────────────────────────────────────
+      models.forEach(m => {
+        console.log("[Model Switcher] Adding model:", m.model, "id:", m.id, "current:", currentModel);
+        const opt = document.createElement("div");
+        opt.className = "sib-model-option";
+        opt.dataset.modelId = m.id;
+        if (m.model === currentModel) opt.classList.add("current");
+
+        const left = document.createElement("span");
+        left.className = "sib-model-name";
+        left.textContent = m.model;
+        opt.appendChild(left);
+
+        const right = document.createElement("span");
+        right.className = "sib-model-right";
+
+        if (m.type === "default") {
+          const badge = document.createElement("span");
+          badge.className = `model-badge ${m.type}`;
+          badge.textContent = m.type;
+          right.appendChild(badge);
+        }
+
+        // Latency cell — populated from _benchCache on open, updated live
+        // when a benchmark run completes. Empty slot keeps row heights stable
+        // so the list doesn't visually jump mid-benchmark.
+        const lat = document.createElement("span");
+        lat.className = "sib-model-latency";
+        _fillLatencyCell(lat, _benchCache[m.id]);
+        right.appendChild(lat);
+
+        opt.appendChild(right);
+
+        // Switch by id (stable across reorders/edits). Keep model name for UI update.
+        opt.addEventListener("click", () => _switchModel(sessionId, m.id, m.model));
+        dropdown.appendChild(opt);
+      });
+      console.log("[Model Switcher] Dropdown populated, children count:", dropdown.children.length);
+    } catch (e) {
+      console.error("Failed to load models:", e);
+      dropdown.innerHTML = '<div style="padding:12px;text-align:center;color:var(--color-error);font-size:11px;">Error loading models</div>';
+    }
+  }
+
+  // Render one latency cell based on a cached result.
+  //   undefined    → empty slot (never tested / in-flight starts from here)
+  //   { ok:true }  → "812ms" in green/amber/red per threshold
+  //   { ok:false } → "✕" with error in tooltip
+  //   { pending:true } → "…" spinner-ish marker
+  function _fillLatencyCell(el, entry) {
+    el.className = "sib-model-latency";
+    el.textContent = "";
+    el.removeAttribute("title");
+    if (!entry) return;
+    if (entry.pending) {
+      el.textContent = "…";
+      el.classList.add("is-pending");
+      return;
+    }
+    if (!entry.ok) {
+      el.textContent = "✕";
+      el.classList.add("is-err");
+      el.title = entry.error || "failed";
+      return;
+    }
+    const ms = entry.ttft_ms;
+    // Same thresholds as the sib-signal status bar — keep them aligned so
+    // "3 bars in the status bar" ≈ "green number in the picker".
+    // We measure full non-streaming response time (not real TTFT), so ≤60s is
+    // normal, ≤120s is slow, beyond is bad. ≤2s still gets the "feels instant"
+    // green treatment like the 4-bar signal.
+    let cls = "is-bad";
+    if      (ms <= 2000)   cls = "is-ok";
+    else if (ms <= 60000)  cls = "is-ok";
+    else if (ms <= 120000) cls = "is-warn";
+    el.classList.add(cls);
+    el.textContent = ms >= 1000 ? (ms / 1000).toFixed(1) + "s" : ms + "ms";
+    if (typeof I18n !== "undefined") {
+      el.title = I18n.t("sib.bench.latencyTooltip", {
+        ttft: el.textContent,
+        time: new Date(entry.ts).toLocaleTimeString(),
+      });
+    } else {
+      el.title = `TTFT ${el.textContent} · tested ${new Date(entry.ts).toLocaleTimeString()}`;
+    }
+  }
+
+  async function _runBenchmark(sessionId, dropdown, btn, label, hint) {
+    if (_benchInFlight) return;
+    _benchInFlight = true;
+    btn.disabled = true;
+    const origLabel = label.textContent;
+    const _t = (key, vars) => (typeof I18n !== "undefined") ? I18n.t(key, vars) : key;
+    label.textContent = _t("sib.bench.running");
+    hint.textContent = "";
+
+    // Mark every row as pending so the user sees instant feedback instead of
+    // a silent button. _fillLatencyCell handles the visual treatment.
+    dropdown.querySelectorAll(".sib-model-option").forEach(opt => {
+      const id = opt.dataset.modelId;
+      if (!id) return;
+      _benchCache[id] = { pending: true };
+      _fillLatencyCell(opt.querySelector(".sib-model-latency"), _benchCache[id]);
+    });
+
+    const t0 = performance.now();
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/benchmark`, { method: "POST" });
+      const data = await res.json();
+      if (!res.ok || !data.ok) throw new Error(data.error || "benchmark failed");
+
+      const now = Date.now();
+      (data.results || []).forEach(r => {
+        _benchCache[r.model_id] = {
+          ok: !!r.ok,
+          ttft_ms: r.ttft_ms,
+          error: r.error,
+          ts: now,
+        };
+        const opt = dropdown.querySelector(`.sib-model-option[data-model-id="${CSS.escape(r.model_id)}"]`);
+        if (opt) _fillLatencyCell(opt.querySelector(".sib-model-latency"), _benchCache[r.model_id]);
+      });
+
+      const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
+      hint.textContent = _t("sib.bench.done", { t: elapsed });
+    } catch (e) {
+      console.error("Benchmark failed:", e);
+      hint.textContent = _t("sib.bench.failed", { msg: e.message });
+      // Clear pending markers so rows don't stay stuck on "…"
+      dropdown.querySelectorAll(".sib-model-option").forEach(opt => {
+        const id = opt.dataset.modelId;
+        if (id && _benchCache[id]?.pending) {
+          _benchCache[id] = undefined;
+          _fillLatencyCell(opt.querySelector(".sib-model-latency"), undefined);
+        }
+      });
+    } finally {
+      _benchInFlight = false;
+      btn.disabled = false;
+      label.textContent = origLabel;
+    }
+  }
+
+  // Switch session model via API
+  // modelId — stable runtime id (required by backend)
+  // modelName — display name, used for optimistic UI update
+  async function _switchModel(sessionId, modelId, modelName) {
+    const dropdown = $("sib-model-dropdown");
+    if (dropdown) {
+      dropdown.style.display = "none";
+      _isOpen = false;
+    }
+
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/model`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ model_id: modelId })
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "Unknown error");
+      }
+
+      // Update UI optimistically (will be confirmed by session_update broadcast)
+      const sibModel = $("sib-model");
+      if (sibModel) sibModel.textContent = modelName;
+
+      console.log(`Switched session ${sessionId} to model ${modelName} (${modelId})`);
+    } catch (e) {
+      console.error("Failed to switch model:", e);
+      alert("Failed to switch model: " + e.message);
+    }
+  }
+})();
+
+// ── Session Info Bar Working Directory Switcher ───────────────────────────
+(function() {
+  // Handle click on working directory
+  document.addEventListener("click", async (e) => {
+    const dirEl = e.target.closest("#sib-dir");
+    if (dirEl) {
+      e.stopPropagation();
+      const sessionId = dirEl.dataset.sessionId;
+      const currentDir = dirEl.title.replace(" (click to change)", "");
+      
+      const newDir = await Modal.prompt("Change working directory:", currentDir);
+      if (newDir && newDir !== currentDir) {
+        _changeWorkingDirectory(sessionId, newDir);
+      }
+    }
+
+    // Handle click on session ID — toggles a small actions dropdown with
+    // items like "Download session files (for debugging)". Designed to be
+    // extensible (more session-level actions can be added here later).
+    const sibIdEl = e.target.closest("#sib-id");
+    if (sibIdEl) {
+      e.stopPropagation();
+      const sessionId = sibIdEl.dataset.sessionId;
+      if (!sessionId) return;
+      _toggleSessionActionsDropdown(sibIdEl, sessionId);
+      return;
+    }
+
+    // Handle click on an item inside the actions dropdown.
+    const actionItem = e.target.closest(".sib-actions-item");
+    if (actionItem) {
+      e.stopPropagation();
+      const action = actionItem.dataset.action;
+      const sessionId = actionItem.dataset.sessionId;
+      _closeSessionActionsDropdown();
+      if (action === "download" && sessionId) {
+        _downloadSessionBundle(sessionId, actionItem);
+      }
+      return;
+    }
+
+    // Click outside — close the actions dropdown if open.
+    if (!e.target.closest("#sib-actions-dropdown")) {
+      _closeSessionActionsDropdown();
+    }
+  });
+
+  // Close dropdown on Escape.
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") _closeSessionActionsDropdown();
+  });
+
+  function _closeSessionActionsDropdown() {
+    const dd = $("sib-actions-dropdown");
+    if (dd && dd.style.display !== "none") dd.style.display = "none";
+  }
+
+  function _toggleSessionActionsDropdown(anchorEl, sessionId) {
+    const dd = $("sib-actions-dropdown");
+    if (!dd) return;
+
+    // If already open for this session, close it (toggle behaviour).
+    if (dd.style.display !== "none" && dd.dataset.sessionId === sessionId) {
+      dd.style.display = "none";
+      return;
+    }
+
+    _populateSessionActionsDropdown(dd, sessionId);
+    dd.dataset.sessionId = sessionId;
+
+    // Position the dropdown above the session ID element (same pattern as
+    // the model switcher — fixed positioning, centered horizontally).
+    const rect = anchorEl.getBoundingClientRect();
+    dd.style.left = `${rect.left + rect.width / 2}px`;
+    dd.style.top = `${rect.top - 6}px`;
+    dd.style.transform = "translate(-50%, -100%)";
+    dd.style.display = "block";
+  }
+
+  function _populateSessionActionsDropdown(dd, sessionId) {
+    const t = (key, fallback) => (window.I18n && I18n.t(key)) || fallback;
+    dd.innerHTML = "";
+
+    // Download item
+    const item = document.createElement("div");
+    item.className = "sib-actions-item";
+    item.setAttribute("role", "menuitem");
+    item.dataset.action = "download";
+    item.dataset.sessionId = sessionId;
+
+    const icon = document.createElement("span");
+    icon.className = "sib-actions-icon";
+    icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`;
+
+    const label = document.createElement("span");
+    label.className = "sib-actions-label";
+    label.textContent = t("sessions.actions.download", "Download session files");
+
+    const hint = document.createElement("span");
+    hint.className = "sib-actions-hint";
+    hint.textContent = t("sessions.actions.downloadHint", "for debugging");
+
+    item.appendChild(icon);
+    item.appendChild(label);
+    item.appendChild(hint);
+    dd.appendChild(item);
+  }
+
+  async function _downloadSessionBundle(sessionId, btnEl) {
+    // btnEl may be a <button> (legacy) or a menu item <div> — guard accordingly.
+    const wasDisabled = btnEl && btnEl.disabled;
+    if (btnEl) {
+      try { btnEl.disabled = true; } catch (_) {}
+      btnEl.classList && btnEl.classList.add("is-loading");
+    }
+    try {
+      const res = await fetch(`/api/sessions/${encodeURIComponent(sessionId)}/export`);
+      if (!res.ok) {
+        let msg = `HTTP ${res.status}`;
+        try { const data = await res.json(); if (data.error) msg = data.error; } catch (_) {}
+        alert((window.I18n && I18n.t("sessions.export.failed")) || "Failed to download session: " + msg);
+        return;
+      }
+      const blob = await res.blob();
+
+      // Derive filename from Content-Disposition header, fall back to short id.
+      let filename = `clacky-session-${sessionId.slice(0, 8)}.zip`;
+      const cd = res.headers.get("Content-Disposition") || "";
+      const m = cd.match(/filename="?([^"]+)"?/i);
+      if (m) filename = m[1];
+
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      // Revoke on next tick so the browser has a chance to start the download.
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+    } catch (err) {
+      console.error("Session export failed:", err);
+      alert(((window.I18n && I18n.t("sessions.export.failed")) || "Failed to download session") + ": " + err.message);
+    } finally {
+      if (btnEl) {
+        try { btnEl.disabled = wasDisabled; } catch (_) {}
+        btnEl.classList && btnEl.classList.remove("is-loading");
+      }
+    }
+  }
+
+  // Change working directory via backend API
+  async function _changeWorkingDirectory(sessionId, newDir) {
+    try {
+      const res = await fetch(`/api/sessions/${sessionId}/working_dir`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ working_dir: newDir })
+      });
+      
+      const data = await res.json();
+      
+      if (!res.ok) {
+        throw new Error(data.error || "Unknown error");
+      }
+      
+      // Update UI optimistically (will be confirmed by session_update broadcast)
+      const sibDir = $("sib-dir");
+      if (sibDir) {
+        sibDir.textContent = newDir;
+        sibDir.title = newDir + " (click to change)";
+      }
+      
+      console.log(`Changed session ${sessionId} directory to ${newDir}`);
+    } catch (e) {
+      console.error("Failed to change directory:", e);
+      alert("Failed to change directory: " + e.message);
+    }
+  }
+
+})();