openclacky 1.2.17 → 1.3.0

data/lib/clacky/web/sessions.js

@@ -24,8 +24,11 @@ const Sessions = (() => {
   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?
+  const _filter            = { q: "", date: "", type: "" };  // committed filter (applied to the search overlay)
+  let   _searchOpen        = false;   // is the command-palette search overlay visible?
+  // Search results live in their own list, rendered into the overlay's
+  // #session-search-results — they NEVER replace the sidebar session list.
+  let   _searchResults     = [];
   // Active search result split when _filter.q is non-empty:
   // { nameIds: Set<id>, contentIds: Set<id>, contentLoaded: bool }
   let   _searchSplit       = null;
@@ -460,6 +463,20 @@ const Sessions = (() => {
     document.getElementById("btn-welcome-new")
       .addEventListener("click", () => Sessions.create("general"));
 
+    // Welcome screen starter chips: create a session, then prefill the prompt
+    document.querySelectorAll(".chip[data-welcome-prompt]").forEach((chip) => {
+      chip.addEventListener("click", async () => {
+        await Sessions.create("general");
+        const prompt = I18n.t(chip.dataset.welcomePrompt);
+        const input  = document.getElementById("user-input");
+        if (input && prompt) {
+          input.value = prompt;
+          input.focus();
+          input.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+      });
+    });
+
     // Modal: cancel / create / overlay click
     document.getElementById("new-session-cancel")
       .addEventListener("click", () => Sessions.closeNewSessionModal());
@@ -474,10 +491,17 @@ const Sessions = (() => {
         }
       });
 
-    // (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.)
+    // Working-directory browse button → reuses the session picker in
+    // session-less mode (no session exists yet, so it browses via /api/dirs).
+    const browseBtn = document.getElementById("new-session-browse-btn");
+    if (browseBtn) {
+      browseBtn.addEventListener("click", async () => {
+        const dirInput = document.getElementById("new-session-directory");
+        const start = dirInput ? dirInput.value.trim() : "";
+        const picked = await window.openDirectoryPicker(start, null);
+        if (picked && dirInput) dirInput.value = picked;
+      });
+    }
 
     // Load-more sessions button is rendered dynamically by renderList(),
     // so we listen via event delegation.
@@ -866,21 +890,39 @@ const Sessions = (() => {
   // Everything uses event delegation because some elements (e.g. the clear
   // buttons) are re-rendered as filter state changes.
   function _initSearch() {
-    // Magnifier toggle button
+    // Open the palette: top cmdbar button (or ⌘K, bound below).
     document.addEventListener("click", (e) => {
-      if (e.target && e.target.closest("#btn-session-search-toggle")) {
-        Sessions.toggleSearch();
+      if (e.target && e.target.closest("#header-cmdbar")) {
+        if (!Sessions.searchOpen) Sessions.toggleSearch();
       }
     });
 
-    // Close button inside panel
+    // Close button inside palette.
     document.addEventListener("click", (e) => {
-      if (e.target && e.target.id === "btn-session-search-close") {
+      if (e.target && e.target.closest("#btn-session-search-close")) {
         if (Sessions.searchOpen) Sessions.toggleSearch();
       }
     });
 
-    // Enter key → commit search.
+    // Click on the dimmed backdrop (outside the palette card) closes it.
+    document.addEventListener("click", (e) => {
+      if (e.target && e.target.id === "session-search-overlay" && Sessions.searchOpen) {
+        Sessions.toggleSearch();
+      }
+    });
+
+    // ⌘K / Ctrl-K toggles the palette; Esc closes it.
+    document.addEventListener("keydown", (e) => {
+      if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
+        e.preventDefault();
+        Sessions.toggleSearch();
+      } else if (e.key === "Escape" && Sessions.searchOpen) {
+        e.preventDefault();
+        Sessions.toggleSearch();
+      }
+    });
+
+    // Enter key → commit search immediately.
     // 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");
@@ -908,11 +950,14 @@ const Sessions = (() => {
       }
     });
 
-    // Show/hide inline ✕ as user types in search input
+    // Show/hide inline ✕ + debounced live search as the user types.
+    let _searchDebounce = null;
     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;
+        clearTimeout(_searchDebounce);
+        _searchDebounce = setTimeout(() => Sessions.commitSearch(), 200);
       }
     });
 
@@ -1080,18 +1125,26 @@ const Sessions = (() => {
   function _toggleToolItemDetails(item) {
     if (!item) return;
     const details = item.querySelector(".tool-item-details");
-    if (!details) return;
-    const isHidden = details.style.display === "none";
-    if (isHidden) {
-      if (!details.dataset.filled) {
-        const json = item.dataset.argsJson || "";
-        details.textContent = json;
-        details.dataset.filled = "1";
-      }
-      details.style.display = "";
+    const stdout  = item.querySelector(".tool-item-stdout");
+    // Determine current expanded state: either details or stdout is visible
+    const detailsVisible = details && details.style.display !== "none";
+    const stdoutVisible  = stdout  && stdout.style.display  !== "none";
+    const isExpanded = detailsVisible || stdoutVisible;
+
+    if (!isExpanded) {
+      if (details) {
+        if (!details.dataset.filled) {
+          const json = item.dataset.argsJson || "";
+          details.textContent = json;
+          details.dataset.filled = "1";
+        }
+        if (item.dataset.argsJson) details.style.display = "";
+      }
+      if (stdout && stdout.innerHTML.trim()) stdout.style.display = "";
       item.classList.add("expanded");
     } else {
-      details.style.display = "none";
+      if (details) details.style.display = "none";
+      if (stdout)  stdout.style.display  = "none";
       item.classList.remove("expanded");
     }
   }
@@ -1192,7 +1245,8 @@ const Sessions = (() => {
   }
 
   // Mark the last tool-item in a group as done (update status indicator).
-  function _completeLastToolItem(group, result) {
+  // collapsed: true → keep stdout hidden (history mode); false → show immediately (live mode).
+  function _completeLastToolItem(group, result, { collapsed = false } = {}) {
     const body  = group.querySelector(".tool-group-body");
     const items = body.querySelectorAll(".tool-item");
     if (!items.length) return;
@@ -1208,20 +1262,25 @@ const Sessions = (() => {
       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.
     const stdout = last.querySelector(".tool-item-stdout");
     if (stdout) {
       const existing = stdout.textContent.trim();
       const resultStr = (result == null) ? "" : String(result).trim();
       if (!existing && resultStr) {
         stdout.innerHTML = _ansiToHtml(resultStr);
-        stdout.style.display = "";
-      } else if (!existing && !resultStr) {
+      }
+      const hasContent = !!stdout.textContent.trim();
+      if (hasContent) {
+        // Collapse stdout once the command finishes; header click re-expands.
+        stdout.style.display = "none";
+        last.classList.remove("expanded");
+        const header = last.querySelector(".tool-item-header");
+        if (header && !header.classList.contains("tool-item-expandable")) {
+          header.classList.add("tool-item-expandable");
+        }
+      } else {
         stdout.style.display = "none";
       }
-      // else: leave existing content as-is
     }
   }
 
@@ -1336,7 +1395,11 @@ const Sessions = (() => {
             const resultStr = (ev.result == null) ? "" : String(ev.result).trim();
             if (resultStr && !stdout.textContent.trim()) {
               stdout.innerHTML = _ansiToHtml(resultStr);
-              stdout.style.display = "";
+              // Collapsed by default in history; click header to expand
+              const header = historyCtx.lastItem.querySelector(".tool-item-header");
+              if (header && !header.classList.contains("tool-item-expandable")) {
+                header.classList.add("tool-item-expandable");
+              }
             } else if (!resultStr && !stdout.textContent.trim()) {
               stdout.style.display = "none";
             }
@@ -1419,6 +1482,10 @@ const Sessions = (() => {
     if (!stdout) return;
     stdout.innerHTML += lines.map(_ansiToHtml).join("");
     if (stdout.style.display === "none") stdout.style.display = "";
+    const header = toolItem.querySelector(".tool-item-header");
+    if (header && !header.classList.contains("tool-item-expandable")) {
+      header.classList.add("tool-item-expandable");
+    }
     stdout.scrollTop = stdout.scrollHeight;
     const messages = RenderTarget.outer();
     _scrollToBottomIfNeeded(messages);
@@ -1823,7 +1890,7 @@ const Sessions = (() => {
       metaParts.push(I18n.t("sessions.metaTasks", { n: s.total_tasks }));
     }
     metaParts.push(_relativeTime(s.updated_at || s.created_at));
-    const metaText = metaParts.join(" · ");
+    const metaText = metaParts.join('<span class="session-meta-sep"></span>');
 
     // Source badge — primary identity (cron/channel/setup).
     // Coding is the agent_profile (what kind of assistant is inside); we
@@ -1935,19 +2002,13 @@ const Sessions = (() => {
 
     const normalHeader  = chatSection.querySelector(":scope > .sidebar-divider:first-of-type");
     const cronHeader    = document.getElementById("cron-view-header");
-    const searchBar     = document.getElementById("session-search-bar");
-    const newSessionBtn = document.getElementById("btn-session-search-toggle");
 
     if (isCronView) {
       if (normalHeader) normalHeader.style.display = "none";
       if (cronHeader)   cronHeader.style.display   = "";
-      if (searchBar)    searchBar.hidden            = true;
-      if (newSessionBtn) newSessionBtn.style.display = "none";
     } else {
       if (normalHeader) normalHeader.style.display = "";
       if (cronHeader)   cronHeader.style.display   = "none";
-      if (searchBar)    searchBar.hidden            = !_searchOpen;
-      // newSessionBtn display managed by renderList's magnifier logic
     }
   }
 
@@ -2068,23 +2129,26 @@ const Sessions = (() => {
       if (_loadingMore || !_hasMore) return;
       _loadingMore = true;
 
-      // Save scroll position so the sidebar doesn't jump back to the active
-      // session when renderList() forces scroll-to-active.
+      // Save scroll position so the sidebar stays put across the DOM rebuild
+      // that renderList() performs (clearing + repopulating the list can reset
+      // the container's scrollTop).
       const sidebarList = document.getElementById("sidebar-list");
       const savedScrollTop = sidebarList ? sidebarList.scrollTop : 0;
-      Sessions.renderList({ skipScrollToActive: true });
+      Sessions.renderList();
 
       try {
-        // Cursor: oldest created_at in the current list, EXCLUDING pinned
-        // sessions. The backend always returns ALL pinned sessions on the
-        // first page (they bypass pagination), so their created_at is
-        // irrelevant for cursor calculation. Including them here would
-        // cause the cursor to jump too far back and skip sessions between
-        // the oldest pinned one and the real last-loaded non-pinned row.
+        // Cursor: oldest activity time (updated_at, falling back to
+        // created_at) in the current list, EXCLUDING pinned sessions. The
+        // backend always returns ALL pinned sessions on the first page (they
+        // bypass pagination), so their time is irrelevant for the cursor.
+        // Including them here would cause the cursor to jump too far back and
+        // skip sessions between the oldest pinned one and the real
+        // last-loaded non-pinned row.
         const oldest = _sessions.reduce((min, s) => {
           if (s.pinned) return min;                       // ignore pinned
-          if (!s.created_at) return min;
-          return (!min || s.created_at < min) ? s.created_at : min;
+          const t = s.updated_at || s.created_at;
+          if (!t) return min;
+          return (!min || t < min) ? t : min;
         }, null);
 
         const params = new URLSearchParams({ limit: "20" });
@@ -2106,7 +2170,7 @@ const Sessions = (() => {
         console.error("loadMore error:", e);
       } finally {
         _loadingMore = false;
-        Sessions.renderList({ skipScrollToActive: true });
+        Sessions.renderList();
         // Restore scroll position so the user stays where they were
         if (sidebarList) sidebarList.scrollTop = savedScrollTop;
       }
@@ -2126,7 +2190,7 @@ const Sessions = (() => {
 
       const sidebarList = document.getElementById("sidebar-list");
       const savedScrollTop = sidebarList ? sidebarList.scrollTop : 0;
-      Sessions.renderList({ skipScrollToActive: true });
+      Sessions.renderList();
 
       try {
         const params = new URLSearchParams({ limit: "20", type: "cron" });
@@ -2140,12 +2204,14 @@ const Sessions = (() => {
         rows.forEach(s => {
           if (!_sessions.find(x => x.id === s.id)) _sessions.push(s);
         });
-        // Advance cursor to the oldest cron created_at in THIS batch (exclude
-        // pinned — backend returns all pinned on the first page, bypassing
-        // pagination, so their created_at must not drag the cursor back).
+        // Advance cursor to the oldest cron activity time in THIS batch
+        // (exclude pinned — backend returns all pinned on the first page,
+        // bypassing pagination, so their time must not drag the cursor back).
         const oldest = rows.reduce((min, s) => {
-          if (s.pinned || !s.created_at) return min;
-          return (!min || s.created_at < min) ? s.created_at : min;
+          if (s.pinned) return min;
+          const t = s.updated_at || s.created_at;
+          if (!t) return min;
+          return (!min || t < min) ? t : min;
         }, null);
         if (oldest) _cronBefore = oldest;
         _cronHasMore = !!data.has_more;
@@ -2154,12 +2220,13 @@ const Sessions = (() => {
         console.error("loadMoreCron error:", e);
       } finally {
         _cronLoadingMore = false;
-        Sessions.renderList({ skipScrollToActive: true });
+        Sessions.renderList();
         if (sidebarList) sidebarList.scrollTop = savedScrollTop;
       }
     },
 
-    /** Commit current filter values and re-fetch from server. Called by Enter / Go button. */
+    /** Commit current filter values, fetch results, and render them into the
+     *  search overlay. Never touches the sidebar session list (_sessions). */
     async commitSearch() {
       const qEl    = document.getElementById("session-search-q");
       const typeEl = document.getElementById("session-search-type");
@@ -2169,13 +2236,19 @@ const Sessions = (() => {
       if (dateEl) _filter.date = dateEl.dataset.value || "";
 
       const token = ++_searchToken;
-      _loadingMore = true;
-      Sessions.renderList({ skipScrollToActive: true });
+      const hasQuery = !!(_filter.q || _filter.date || _filter.type);
+      // Empty filter → clear results, show the default hint instead.
+      if (!hasQuery) {
+        _searchResults = [];
+        _searchSplit   = null;
+        Sessions._renderSearchResults({ state: "idle" });
+        return;
+      }
+
+      Sessions._renderSearchResults({ state: "loading" });
 
-      let nextSessions = [];
-      let nextHasMore  = false;
-      let nextCronCnt  = 0;
-      let nextSplit    = null;
+      let nextResults = [];
+      let nextSplit   = null;
 
       try {
         const baseParams = new URLSearchParams({ limit: "20" });
@@ -2207,34 +2280,24 @@ const Sessions = (() => {
             s._matchVia = "content";
           });
 
-          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 };
+          nextResults = [...(nameData.sessions || [])];
+          (contentData.sessions || []).forEach(s => { if (!nameIds.has(s.id)) nextResults.push(s); });
+          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;
+          nextResults = data.sessions || [];
         }
 
-        _sessions.length = 0;
-        _sessions.push(...nextSessions);
-        _hasMore     = nextHasMore;
-        _cronCount   = nextCronCnt;
-        _searchSplit = nextSplit;
+        _searchResults = nextResults;
+        _searchSplit   = nextSplit;
       } catch (e) {
         if (token === _searchToken) console.error("commitSearch error:", e);
       } finally {
-        if (token === _searchToken) {
-          _loadingMore = false;
-          Sessions.renderList();
-        }
+        if (token === _searchToken) Sessions._renderSearchResults();
       }
     },
 
@@ -2250,39 +2313,98 @@ const Sessions = (() => {
       await Sessions.commitSearch();
     },
 
-    /** Toggle the search panel open/closed. */
+    /** Render search results into the overlay's #session-search-results. */
+    _renderSearchResults({ state = "results" } = {}) {
+      const box = document.getElementById("session-search-results");
+      if (!box) return;
+      box.innerHTML = "";
+
+      if (state === "idle") {
+        const hint = document.createElement("div");
+        hint.className = "cmd-palette-hint";
+        hint.textContent = I18n.t("sessions.search.hint");
+        box.appendChild(hint);
+        return;
+      }
+      if (state === "loading") {
+        const ld = document.createElement("div");
+        ld.className = "cmd-palette-hint";
+        ld.textContent = I18n.t("sessions.search.loading");
+        box.appendChild(ld);
+        return;
+      }
+
+      if (_filter.q && _searchSplit) {
+        const { nameIds, contentIds, contentLoaded } = _searchSplit;
+        const nameRows    = _searchResults.filter(s => nameIds.has(s.id));
+        const contentRows = _searchResults.filter(s => contentIds.has(s.id));
+
+        if (nameRows.length > 0) {
+          box.appendChild(_makeSearchHeader(I18n.t("sessions.search.byName", { n: nameRows.length })));
+          nameRows.forEach(s => _renderSessionItem(box, s));
+        }
+        if (contentLoaded) {
+          box.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");
+            box.appendChild(empty);
+          } else {
+            contentRows.forEach(s => _renderSessionItem(box, s));
+          }
+        }
+        if (nameRows.length === 0 && contentRows.length === 0) {
+          const empty = document.createElement("div");
+          empty.className = "session-empty";
+          empty.textContent = I18n.t("sessions.search.contentEmpty");
+          box.appendChild(empty);
+        }
+      } else if (_searchResults.length === 0) {
+        const empty = document.createElement("div");
+        empty.className = "session-empty";
+        empty.textContent = I18n.t("sessions.search.contentEmpty");
+        box.appendChild(empty);
+      } else {
+        _searchResults.forEach(s => _renderSessionItem(box, s));
+      }
+    },
+
+    /** Open/close the command-palette search overlay. */
     toggleSearch() {
       _searchOpen = !_searchOpen;
-      const panel  = document.getElementById("session-search-bar");
-      const togBtn = document.getElementById("btn-session-search-toggle");
-      if (!panel) return;
+      const overlay = document.getElementById("session-search-overlay");
+      const cmdbar  = document.getElementById("header-cmdbar");
+      if (!overlay) { _searchOpen = false; return; }
 
       if (_searchOpen) {
-        panel.hidden = false;
-        panel.classList.add("search-panel--open");
-        togBtn && togBtn.classList.add("active");
-        // Auto-focus the text input
+        overlay.hidden = false;
+        // Force reflow so the open transition runs from the hidden state.
+        void overlay.offsetWidth;
+        overlay.classList.add("cmd-palette--open");
+        cmdbar && cmdbar.classList.add("active");
+        Sessions._renderSearchResults({ state: "idle" });
         const inp = document.getElementById("session-search-q");
         if (inp) setTimeout(() => inp.focus(), 30);
       } else {
-        panel.classList.remove("search-panel--open");
-        togBtn && togBtn.classList.remove("active");
-        // After animation finishes, hide panel and reset inputs
-        const hadActiveFilter = _filter.q || _filter.date || _filter.type;
+        overlay.classList.remove("cmd-palette--open");
+        cmdbar && cmdbar.classList.remove("active");
         setTimeout(() => {
-          panel.hidden = true;
-          // Reset DOM inputs
-          const qEl  = document.getElementById("session-search-q");
-          const dEl  = document.getElementById("session-search-date");
-          const tEl  = document.getElementById("session-search-type");
+          overlay.hidden = true;
+          // Reset inputs + filter state so the next open starts clean.
+          const qEl = document.getElementById("session-search-q");
+          const dEl = document.getElementById("session-search-date");
+          const tEl = document.getElementById("session-search-type");
           if (qEl) qEl.value = "";
           if (dEl) DatePicker.clear(dEl);
           if (tEl) tEl.value = "";
-          // Clear filter state
+          const qClear = document.getElementById("btn-search-q-clear");
+          if (qClear) qClear.hidden = true;
           _filter.q = _filter.date = _filter.type = "";
-          // Only re-fetch if a filter was actually active (avoids pointless reload)
-          if (hadActiveFilter) Sessions.commitSearch();
-        }, 180);
+          _searchResults = [];
+          _searchSplit   = null;
+          _searchToken++;   // invalidate any in-flight request
+        }, 160);
       }
     },
 
@@ -2352,8 +2474,9 @@ const Sessions = (() => {
 
     /** Navigate to a session. Delegates panel switching to Router. */
     select(id) {
-      const s = _sessions.find(s => s.id === id);
+      const s = _sessions.find(s => s.id === id) || _searchResults.find(s => s.id === id);
       if (!s) return;
+      if (_searchOpen) Sessions.toggleSearch();   // close palette on pick
       Router.navigate("session", { id });
     },
 
@@ -2402,49 +2525,24 @@ const Sessions = (() => {
 
     // ── Rendering ─────────────────────────────────────────────────────────
 
-    renderList({ skipScrollToActive = false } = {}) {
-      // Sort helper: pinned first, then newest-first by created_at
+    renderList({ scrollToActive = false } = {}) {
+      // Sort helper: pinned first, then most-recently-active by updated_at
       const byPinnedAndTime = (a, b) => {
         // Pinned sessions always come first
         if (a.pinned && !b.pinned) return -1;
         if (!a.pinned && b.pinned) return 1;
-        // Within same pinned status, sort by time (newest first)
-        const ta = a.created_at ? new Date(a.created_at) : 0;
-        const tb = b.created_at ? new Date(b.created_at) : 0;
-        return tb - ta;
+        // Within same pinned status, sort by last activity (newest first)
+        const ta = a.updated_at || a.created_at;
+        const tb = b.updated_at || b.created_at;
+        return new Date(tb || 0) - new Date(ta || 0);
       };
 
-      // ── Apply client-side filter (mirrors server params for instant feedback) ─
-      const { q, date, type } = _filter;
-      let visible = [..._sessions].sort(byPinnedAndTime);
-      if (date) visible = visible.filter(s => (s.created_at || "").startsWith(date));
-      if (type) {
-        visible = type === "coding"
-          ? visible.filter(s => s.agent_profile === "coding")
-          : visible.filter(s => s.source === type && s.agent_profile !== "coding");
-      }
-
-      // ── Show/hide magnifier button ─────────────────────────────────────
-      // Always visible when search panel is open; otherwise hide when < 10 sessions total.
-      const togBtn = document.getElementById("btn-session-search-toggle");
-      if (togBtn) togBtn.style.display = (_searchOpen || _sessions.length >= 10) ? "" : "none";
-
-      // ── Update filter UI: highlight active selects/date, show/hide clear button ──
-      const typeEl      = document.getElementById("session-search-type");
-      const dateEl      = document.getElementById("session-search-date");
-      const clearAllBtn = document.getElementById("btn-search-clear-all");
-      const qClearBtn   = document.getElementById("btn-search-q-clear");
-      if (typeEl)      typeEl.dataset.active = _filter.type ? "true" : "false";
-      if (dateEl)      dateEl.dataset.active = _filter.date ? "true" : "false";
-      const hasFilter = !!(_filter.type || _filter.date);
-      if (clearAllBtn) clearAllBtn.hidden = !hasFilter;
-      // ✕ inside the input — update based on current q value
-      const qEl = document.getElementById("session-search-q");
-      if (qClearBtn) qClearBtn.hidden = !(qEl && qEl.value);
+      // ── Sidebar list always shows the full session set, sorted ───────
+      // Search/filter no longer touches this list — it lives in the overlay.
+      const visible = [..._sessions].sort(byPinnedAndTime);
 
       // ── Split cron vs non-cron for folding ───────────────────────────
-      const hasActiveFilter = !!(_filter.q || _filter.type || _filter.date);
-      const isCronView      = _cronView && !hasActiveFilter;
+      const isCronView      = _cronView;
       const cronSessions    = visible.filter(s => s.source === "cron");
 
       // Update chat-section header based on view mode
@@ -2453,33 +2551,7 @@ const Sessions = (() => {
       const list = $("session-list");
       list.innerHTML = "";
 
-      if (hasActiveFilter) {
-        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).
+      if (isCronView) {
         // We never call the outer loadMore() here, so the outer list's cursor
         // is left untouched. While the first page is in flight and nothing is
         // loaded yet, show a loading placeholder instead of the empty state.
@@ -2534,8 +2606,13 @@ const Sessions = (() => {
         list.appendChild(_makeLoadMoreBtn());
       }
 
-      // Scroll active session into view so the sidebar always shows the current session.
-      if (!skipScrollToActive) {
+      // Scroll the active session into view ONLY when the caller explicitly
+      // asks for it (i.e. the user just activated/switched to this session).
+      // Plain re-renders triggered by content updates (status/cost/task changes
+      // streamed in while an agent runs) must NOT move the sidebar — otherwise
+      // they yank the list back to the active row and interrupt the user who
+      // has scrolled away to browse other sessions.
+      if (scrollToActive) {
         const activeEl = list.querySelector(".session-item.active");
         if (activeEl) {
           // If the active session is the very first item, scroll to top of the sidebar
@@ -2807,7 +2884,7 @@ const Sessions = (() => {
       // Status dot + text — first
       const sibStatus = $("sib-status");
       if (sibStatus) {
-        sibStatus.textContent = `● ${s.status || "idle"}`;
+        sibStatus.innerHTML = `<span class="sib-dot"></span>${s.status || "idle"}`;
         sibStatus.className = `sib-status-${s.status || "idle"}`;
       }
 
@@ -3369,6 +3446,8 @@ const Sessions = (() => {
         return text || I18n.t("chat.retrying");
       } else if (progress_type === "idle_compress") {
         return text || "Compressing...";
+      } else if (progress_type === "vision") {
+        return I18n.t("chat.vision");
       }
       return text || I18n.t("chat.thinking");
     },
@@ -3616,10 +3695,18 @@ const Sessions = (() => {
       // Populate model dropdown from configured models
       _populateModelDropdown();
 
-      // Set default working directory
+      // Set default working directory to an absolute path (home/clacky_workspace).
       const dirInput = $("new-session-directory");
       if (dirInput && !dirInput.value) {
-        dirInput.value = "~/clacky_workspace";
+        fetch("/api/dirs")
+          .then(r => r.ok ? r.json() : null)
+          .then(data => {
+            const home = data && data.home;
+            if (home && !dirInput.value) {
+              dirInput.value = home.replace(/\/+$/, "") + "/clacky_workspace";
+            }
+          })
+          .catch(() => {});
       }
 
       // Setup agent type change listener to show/hide init project checkbox
@@ -3854,10 +3941,11 @@ const Sessions = (() => {
 
     try {
       console.log("[Model Switcher] Fetching /api/config...");
-      const res = await fetch("/api/config");
+      const res = await fetch(`/api/config?session_id=${encodeURIComponent(sessionId)}`);
       const data = await res.json();
       console.log("[Model Switcher] Received data:", data);
       const models = data.models || [];
+      const mediaCaps = data.media_capabilities || {};
       console.log("[Model Switcher] Models count:", models.length);
 
       if (models.length === 0) {
@@ -3919,6 +4007,17 @@ const Sessions = (() => {
         nameLine.textContent = hasActiveOverride ? subInfo.current : m.model;
         left.appendChild(nameLine);
 
+        // Vision status for the active model only — follows whichever model is
+        // currently in effect (mediaCaps is computed for that same model).
+        if (m.id === currentModelId && mediaCaps.vision) {
+          const ok = !!mediaCaps.vision.configured;
+          const vis = document.createElement("span");
+          vis.className = "sib-model-vision " + (ok ? "is-ok" : "is-missing");
+          vis.textContent = ok ? I18n.t("sib.vision.ok") : I18n.t("sib.vision.missing");
+          vis.title = ok ? I18n.t("sib.vision.okTip") : I18n.t("sib.vision.missingTip");
+          left.appendChild(vis);
+        }
+
         if (_nameCounts[m.model] > 1) {
           left.classList.add("has-sub");
           const host = (() => {
@@ -3979,6 +4078,8 @@ const Sessions = (() => {
         opt.addEventListener("click", () => _switchModel(sessionId, m.id, m.model));
         dropdown.appendChild(opt);
       });
+
+      _appendGenerationFooter(dropdown, mediaCaps);
       console.log("[Model Switcher] Dropdown populated, children count:", dropdown.children.length);
     } catch (e) {
       console.error("Failed to load models:", e);
@@ -3986,6 +4087,56 @@ const Sessions = (() => {
     }
   }
 
+  // Footer for image/video/audio generation. These come only from dedicated
+  // sidecar models (the chat model can't generate media). We always show all
+  // three kinds — configured ones highlighted, the rest dimmed — plus a single
+  // Settings entry so users can add or change a generation model.
+  function _appendGenerationFooter(dropdown, mediaCaps) {
+    const kinds = ["image", "video", "audio"];
+    const footer = document.createElement("div");
+    footer.className = "sib-gen-footer";
+
+    const list = document.createElement("span");
+    list.className = "sib-gen-list";
+    kinds.forEach(k => {
+      const cap = mediaCaps[k] || {};
+      const ok = !!cap.configured;
+      const chip = document.createElement("span");
+      chip.className = "sib-gen-chip " + (ok ? "is-ok" : "is-off");
+      chip.textContent = (ok ? "✓ " : "") + I18n.t(`sib.gen.kind.${k}`);
+      chip.title = ok
+        ? I18n.t("sib.gen.okTip", { model: cap.model || "" })
+        : I18n.t("sib.gen.offTip");
+      list.appendChild(chip);
+    });
+    footer.appendChild(list);
+
+    const configBtn = document.createElement("button");
+    configBtn.type = "button";
+    configBtn.className = "sib-gen-config";
+    configBtn.textContent = I18n.t("sib.gen.config");
+    configBtn.title = I18n.t("sib.gen.offTip");
+    configBtn.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      _goConfigureMedia();
+    });
+    footer.appendChild(configBtn);
+
+    dropdown.appendChild(footer);
+  }
+
+  function _goConfigureMedia() {
+    const dropdown = $("sib-model-dropdown");
+    if (dropdown) dropdown.style.display = "none";
+    _isOpen = false;
+    _closeSubmodelPanel();
+    if (typeof Router !== "undefined") Router.navigate("settings");
+    setTimeout(() => {
+      const sec = document.getElementById("media-section");
+      if (sec) sec.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 200);
+  }
+
   // 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
@@ -4109,9 +4260,12 @@ const Sessions = (() => {
         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;
+      // The status bar is updated by the session_update broadcast that the
+      // backend emits inside this same request. Don't touch sibModel here:
+      // the broadcast typically arrives BEFORE this fetch resolves (WS frame
+      // vs HTTP response on separate TCP streams), so writing here would
+      // overwrite the already-correct value with an incomplete one (this
+      // function only knows the card name, not whether a sub-model is pinned).
 
       console.log(`Switched session ${sessionId} to model ${modelName} (${modelId})`);
     } catch (e) {
@@ -4139,11 +4293,10 @@ const Sessions = (() => {
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || "Unknown error");
 
-      const sibModel = $("sib-model");
-      if (sibModel) {
-        sibModel.textContent = displayName || "";
-        sibModel.dataset.subModel = modelName || "";
-      }
+      // The status bar is updated by the session_update broadcast that the
+      // backend emits inside this same request. Don't touch sibModel here:
+      // the broadcast typically arrives BEFORE this fetch resolves, so any
+      // write here would race with (and often overwrite) the correct value.
     } catch (e) {
       console.error("Failed to switch sub-model:", e);
       alert("Failed to switch sub-model: " + e.message);
@@ -4272,13 +4425,33 @@ const Sessions = (() => {
         return (s && s !== key) ? s : fallback;
       };
 
+      // When no session exists yet (e.g. the New Session modal), browse the
+      // real filesystem via /api/dirs instead of the session-scoped files API.
+      const sessionLess = !sessionId;
+
       let selectedPath = currentDir;
       let rootDir = ""; // absolute path of the session's working directory
+      let homeDir = ""; // user home, used as the "working directory" preset when session-less
+      let showHidden = false;
 
       // Fetch directory entries from API, returns dirs with absolute paths
       async function fetchDirs(relPath, absolute = false) {
+        if (sessionLess) {
+          // /api/dirs already returns absolute paths and operates in absolute mode.
+          let url = `/api/dirs${relPath ? `?path=${encodeURIComponent(relPath)}` : ""}`;
+          if (showHidden) url += `${url.includes("?") ? "&" : "?"}show_hidden=true`;
+          const resp = await fetch(url);
+          if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+          const data = await resp.json();
+          rootDir = data.root || rootDir;
+          homeDir = data.home || homeDir;
+          const dirs = (data.entries || []).filter(e => e.type === "dir");
+          dirs.forEach(d => { d.absPath = d.path; d.absolute = true; });
+          return dirs;
+        }
         let url = `/api/sessions/${encodeURIComponent(sessionId)}/files?path=${encodeURIComponent(relPath || "")}`;
         if (absolute) url += "&absolute=true";
+        if (showHidden) url += "&show_hidden=true";
         const resp = await fetch(url);
         if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
         const data = await resp.json();
@@ -4397,7 +4570,9 @@ const Sessions = (() => {
       // Title
       const title = document.createElement("div");
       title.className = "modal-title";
-      title.textContent = t("sib.dir.changePrompt", "切换工作目录");
+      title.textContent = sessionLess
+        ? t("sessions.modal.dirpicker.title", "选择工作目录")
+        : t("sib.dir.changePrompt", "切换工作目录");
       modal.appendChild(title);
 
       // Modal body
@@ -4414,12 +4589,42 @@ const Sessions = (() => {
       presets.className = "dp-presets";
       body.appendChild(presets);
 
+      // "Up one level" button — navigates to the parent of the current path.
+      const upBtn = document.createElement("button");
+      upBtn.className = "btn btn-secondary btn-sm dp-up-btn";
+      upBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg><span>${t("sib.dir.up", "上一级")}</span>`;
+      function parentOf(p) {
+        const trimmed = (p || "").replace(/\/+$/, "");
+        if (!trimmed || trimmed === "/" ) return null;
+        const idx = trimmed.lastIndexOf("/");
+        if (idx < 0) return null;
+        return idx === 0 ? "/" : trimmed.substring(0, idx);
+      }
+      function refreshUpBtn() {
+        const parent = parentOf(pathInput.value);
+        upBtn.disabled = !parent;
+      }
+      upBtn.addEventListener("click", () => {
+        const parent = parentOf(pathInput.value);
+        if (!parent) return;
+        selectedPath = parent;
+        pathInput.value = parent;
+        modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+        loadTreeForPath(parent, true);
+      });
+
       function setupPresets() {
         presets.innerHTML = "";
-        const presetDirs = [
-          { value: rootDir, text: t("sib.dir.current", "当前工作目录"), absolute: false },
-          { value: "/", text: t("sib.dir.root", "根目录"), absolute: true }
-        ];        presetDirs.forEach(p => {
+        presets.appendChild(upBtn);
+        const presetDirs = sessionLess
+          ? [
+              { value: homeDir, text: t("sib.dir.home", "主目录"), absolute: true },
+              { value: "/", text: t("sib.dir.root", "根目录"), absolute: true }
+            ]
+          : [
+              { value: rootDir, text: t("sib.dir.current", "当前工作目录"), absolute: false },
+              { value: "/", text: t("sib.dir.root", "根目录"), absolute: true }
+            ];        presetDirs.forEach(p => {
           const btn = document.createElement("button");
           btn.className = "btn btn-secondary btn-sm";
           btn.textContent = p.text;
@@ -4439,6 +4644,9 @@ const Sessions = (() => {
       const pathInput = document.createElement("input");
       pathInput.type = "text";
       pathInput.className = "dir-picker-input";
+      pathInput.spellcheck = false;
+      pathInput.autocomplete = "off";
+      pathInput.setAttribute("autocapitalize", "off");
       pathInput.value = currentDir;
       pathInput.placeholder = t("sib.dir.inputPlaceholder", "输入或选择目录路径");
       pathContainer.appendChild(pathInput);
@@ -4450,6 +4658,19 @@ const Sessions = (() => {
       pathContainer.appendChild(autocomplete);
 
       body.appendChild(pathContainer);
+
+      // Show hidden files toggle
+      const hiddenToggle = document.createElement("label");
+      hiddenToggle.className = "dp-hidden-toggle";
+      const hiddenCheckbox = document.createElement("input");
+      hiddenCheckbox.type = "checkbox";
+      hiddenCheckbox.checked = false;
+      const hiddenLabelText = document.createElement("span");
+      hiddenLabelText.textContent = t("sib.dir.showHidden", "显示隐藏文件");
+      hiddenToggle.appendChild(hiddenCheckbox);
+      hiddenToggle.appendChild(hiddenLabelText);
+      body.appendChild(hiddenToggle);
+
       // Tree container
       const treeContainer = document.createElement("div");
       treeContainer.className = "dp-tree";
@@ -4492,17 +4713,19 @@ const Sessions = (() => {
       pathInput.addEventListener("input", () => {
         selectedPath = pathInput.value;
         modal.querySelectorAll(".dp-row.selected").forEach(el => el.classList.remove("selected"));
+        refreshUpBtn();
       });
 
       // 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 === rootDir || dirPath.startsWith(rootDir + "/"))));
+        // Session-less mode browses absolute paths directly via /api/dirs;
+        // skip the working-directory-relative path math.
+        const useAbsolute = sessionLess || absolute || (dirPath.startsWith("/") && (!rootDir || !(dirPath === rootDir || dirPath.startsWith(rootDir + "/"))));
         // Convert absolute path to relative path for API
         let relPath = dirPath;
-        if (!useAbsolute && rootDir && (dirPath === rootDir || dirPath.startsWith(rootDir + "/"))) {
+        if (!sessionLess && !useAbsolute && rootDir && (dirPath === rootDir || dirPath.startsWith(rootDir + "/"))) {
           relPath = dirPath.substring(rootDir.length).replace(/^\/+/, "");
         }
         try {
@@ -4524,12 +4747,32 @@ const Sessions = (() => {
             dirs.forEach(d => frag.appendChild(buildDirNode(d, 0)));
             treeContainer.appendChild(frag);
           }
+          refreshUpBtn();
         } catch (err) {
           console.error("dir picker load failed:", err);
           treeContainer.innerHTML = `<div class="dp-error">${t("sib.dir.loadError", "加载失败")}</div>`;
         }
       }
-      loadTreeForPath("");
+      // Session-less mode: start browsing from the requested default (e.g.
+      // ~/clacky_workspace). The backend walks up to the nearest existing
+      // ancestor if it doesn't exist yet, while pathInput keeps the original.
+      if (sessionLess && currentDir) {
+        const wanted = currentDir;
+        loadTreeForPath(currentDir, true).then(() => {
+          pathInput.value = wanted;
+          selectedPath = wanted;
+          refreshUpBtn();
+        });
+      } else {
+        loadTreeForPath("");
+      }
+
+      hiddenCheckbox.addEventListener("change", () => {
+        showHidden = hiddenCheckbox.checked;
+        const cur = pathInput.value.trim();
+        const absolute = sessionLess || cur.startsWith("/");
+        loadTreeForPath(cur, absolute);
+      });
 
       // ── Autocomplete logic ──────────────────────────────────────────────
       let autocompleteTimer = null;
@@ -4700,10 +4943,6 @@ const Sessions = (() => {
       overlay.addEventListener("click", (e) => {
         if (e.target === overlay) cancelButton.click();
       });
-
-      // Focus path input
-      pathInput.focus();
-      pathInput.select();
     });
   }
 
@@ -4888,6 +5127,11 @@ const Sessions = (() => {
     }
   }
 
+  // Expose the picker so other modules (e.g. the New Session modal binding in
+  // the Sessions IIFE) can reuse it. Named distinctly to avoid colliding with
+  // the native window.showDirectoryPicker File System Access API.
+  window.openDirectoryPicker = showDirectoryPicker;
+
 })();
 
 // ── Session Info Bar Reasoning Effort Switcher ────────────────────────────