openclacky 1.5.13 → 1.5.14

data/lib/clacky/web/sessions.js

@@ -17,7 +17,7 @@
 
 const Sessions = (() => {
   const _sessions          = [];  // [{ id, name, status, total_tasks, total_cost }]
-  const _historyState      = {};  // { [session_id]: { hasMore, oldestCreatedAt, loading, loaded } }
+  const _historyState      = {};  // Per-session history window, cursors and in-flight request.
   const _renderedCreatedAt = {};  // { [session_id]: Set<number> } — dedup by created_at
   const _drafts            = new Map();  // { [session_id]: composer textarea draft }
   const _attachmentDrafts  = new Map();  // { [session_id]: { images: [...], files: [...] } }
@@ -347,11 +347,8 @@ const Sessions = (() => {
     // Clear the pane and dedup state; history will be re-fetched from API.
     RenderTarget.outer().innerHTML = "";
     delete _renderedCreatedAt[id];
-    if (_historyState[id]) {
-      _historyState[id].oldestCreatedAt = null;
-      _historyState[id].hasMore         = true;
-      _historyState[id].loading         = false;  // reset so next fetch is not skipped
-    }
+    _historyState[id]?.controller?.abort();
+    delete _historyState[id];
     // Reset scroll tracking when switching sessions
     _userScrolledUp = false;
   }
@@ -412,6 +409,12 @@ const Sessions = (() => {
   function _showNewMessageBanner() {
     const banner = $("new-message-banner");
     if (!banner) return;
+    const label = banner.querySelector("span");
+    if (label) {
+      const key = Sessions.isHistoricalWindow() ? "chat.nav.latest" : "chat.newMessageHint";
+      label.dataset.i18n = key;
+      label.textContent = I18n.t(key);
+    }
     banner.style.display = "block";
   }
 
@@ -548,6 +551,10 @@ const Sessions = (() => {
     
     // Click to scroll to bottom
     banner.addEventListener("click", () => {
+      if (Sessions.isHistoricalWindow()) {
+        Sessions.loadLatestHistory();
+        return;
+      }
       messages.scrollTop = messages.scrollHeight;
       _userScrolledUp = false;
       _hideNewMessageBanner();
@@ -569,7 +576,7 @@ const Sessions = (() => {
     // so a content update never moves us "away from bottom" and never trips a
     // false positive here. The 150px threshold in _isAtBottom is extra slack.
     messages.addEventListener("scroll", () => {
-      if (_isAtBottom(messages)) {
+      if (_isAtBottom(messages) && !Sessions.isHistoricalWindow()) {
         _userScrolledUp = false;
         _hideNewMessageBanner();
       } else {
@@ -1123,7 +1130,7 @@ const Sessions = (() => {
       `</span>`;
   }
 
-  function _sendMessage() {
+  async function _sendMessage() {
     if (_sending) return;
     const input   = $("user-input");
     const content = Composer.text(input).trim();
@@ -1147,6 +1154,11 @@ const Sessions = (() => {
     }
 
     _sending = true;
+    if (Sessions.isHistoricalWindow()) {
+      const id = Sessions.activeId;
+      const loaded = await Sessions.loadLatestHistory();
+      if (!loaded || Sessions.activeId !== id) { _sending = false; return; }
+    }
 
     let bubbleHtml = content ? SkillAC.renderUserMessageHtml(content) : "";
     if (mentionChips.length > 0) {
@@ -1407,6 +1419,8 @@ const Sessions = (() => {
       const messages = e.currentTarget;
       if (messages.scrollTop < 80 && Sessions.activeId && Sessions.hasMoreHistory(Sessions.activeId)) {
         Sessions.loadMoreHistory(Sessions.activeId);
+      } else if (_isAtBottom(messages) && Sessions.isHistoricalWindow()) {
+        Sessions.loadNewerHistory();
       }
     });
 
@@ -1804,6 +1818,7 @@ const Sessions = (() => {
         bubbleHtml += SkillAC.renderUserMessageHtml(ev.content || "", ev.skill_command, ev.skill_command_display);
         el.innerHTML = bubbleHtml;
         if (ev.created_at) el.dataset.createdAt = ev.created_at;
+        if (ev.round_id) el.dataset.roundId = ev.round_id;
         // Messages archived into a compressed chunk can't be edited (the backend
         // truncate keys off the active in-memory history). Flag them so the edit
         // affordance stays hidden.
@@ -1987,40 +2002,56 @@ const Sessions = (() => {
 
   // Fetch one page of history and insert into #messages or cache.
   // before=null means most recent page; prepend=true for scroll-up load.
-  async function _fetchHistory(id, before = null, prepend = false) {
-    const state = _historyState[id] || (_historyState[id] = { hasMore: true, oldestCreatedAt: null, loading: false });
-    if (state.loading) return;
+  async function _fetchHistory(id, before = null, prepend = false, options = {}) {
+    const state = _historyState[id] || (_historyState[id] = { hasMore: true, loading: false });
+    if (state.loading && !options.replace) return false;
+    state.controller?.abort();
+    const controller = new AbortController();
+    state.controller = controller;
+    const wasHistorical = !!state.hasAfter;
+    const liveRevision = state.liveRevision || 0;
+    if (options.around) state.hasAfter = true;
+    if (options.replace) state.replacing = true;
     state.loading = true;
+    let succeeded = false;
 
     try {
-      const params = new URLSearchParams({ limit: 30 });
-      if (before) params.set("before", before);
+      const params = new URLSearchParams({ limit: 30, window: 1 });
+      if (before) params.set("before_id", before);
+      if (options.around) params.set("around", options.around);
+      if (options.after) params.set("after_id", options.after);
 
-      const res = await fetch(`/api/sessions/${id}/messages?${params}`);
+      const res = await fetch(`/api/sessions/${id}/messages?${params}`, { signal: controller.signal });
+      if (id !== _activeId || _historyState[id] !== state || state.controller !== controller) return false;
       if (!res.ok) {
+        if (res.status === 409) window.ChatNavigator?.refresh();
         if (id === _activeId) {
           let reason = "";
           try { const d = await res.json(); reason = d.error || ""; } catch {}
           const suffix = reason ? `: ${reason}` : "";
           Sessions.appendMsg("info", `${I18n.t("chat.history_load_failed")} (${res.status}${suffix})`);
         }
-        return;
+        return false;
       }
       const data = await res.json();
+      if (id !== _activeId || _historyState[id] !== state || state.controller !== controller) return false;
 
-      state.hasMore = !!data.has_more;
+      if (!options.after) {
+        state.hasMore = !!data.has_more;
+        state.beforeCursor = data.before_cursor;
+      }
+      if (!prepend) {
+        state.hasAfter = !!data.has_after;
+        state.afterCursor = data.after_cursor;
+      }
+      if (options.replace) {
+        window._closeAllPhases?.("incomplete");
+        Sessions.collapseToolGroup();
+        RenderTarget.outer().replaceChildren();
+        delete _renderedCreatedAt[id];
+      }
 
       const events = data.events || [];
-      if (events.length === 0) return;
-
-      // Track oldest created_at for next cursor (scroll-up pagination)
-      events.forEach(ev => {
-        if (ev.type === "history_user_message" && ev.created_at) {
-          if (state.oldestCreatedAt === null || ev.created_at < state.oldestCreatedAt) {
-            state.oldestCreatedAt = ev.created_at;
-          }
-        }
-      });
 
       // Pre-scan: mark each request_feedback as answered.
       // A feedback card is disabled as soon as any subsequent history_user_message appears
@@ -2028,7 +2059,7 @@ const Sessions = (() => {
       {
         let lastFeedbackIdx = -1;
         events.forEach((ev, i) => {
-          if (ev.type === "request_feedback") { ev._answered = false; lastFeedbackIdx = i; }
+          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;
             lastFeedbackIdx = -1;
@@ -2047,8 +2078,8 @@ const Sessions = (() => {
 
       events.forEach(ev => {
         if (ev.type === "history_user_message") {
-          currentCreatedAt = ev.created_at;
-          skipRound        = currentCreatedAt && dedup.has(currentCreatedAt);
+          currentCreatedAt = ev.round_id || ev.created_at;
+          skipRound = currentCreatedAt && (dedup.has(currentCreatedAt) || (ev.editable !== false && dedup.has(ev.created_at)));
           if (!skipRound && currentCreatedAt) dedup.add(currentCreatedAt);
         }
         if (!skipRound) _renderHistoryEvent(ev, frag, historyCtx);
@@ -2075,10 +2106,16 @@ const Sessions = (() => {
           } else {
             messages.appendChild(frag);
           }
-          messages.scrollTop = messages.scrollHeight;
+          if (options.around) {
+            messages.scrollTop = 0;
+            _userScrolledUp = true;
+          } else if (!options.after) {
+            messages.scrollTop = messages.scrollHeight;
+            _userScrolledUp = false;
+          }
           // Flush any tool_stdout lines that arrived via WS before this history
           // fetch completed (race condition on session switch).
-          if (!prepend) _flushPendingStdout();
+          if (!prepend && !state.hasAfter) _flushPendingStdout();
         }
 
         // If no more history remains, insert a "beginning of conversation" marker at the top.
@@ -2094,7 +2131,7 @@ 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) {
+        if (!prepend && !state.hasAfter) {
           const session = _sessions.find(s => s.id === id);
           if (session) {
             if (session.status === "running") {
@@ -2116,13 +2153,35 @@ const Sessions = (() => {
             }
           }
         }
+        if (state.hasAfter) _showNewMessageBanner();
+        else _hideNewMessageBanner();
+        window.ChatNavigator?.syncMessages();
+      }
+      succeeded = true;
+    } catch (error) {
+      if (error.name !== "AbortError" && id === _activeId && state.controller === controller) {
+        Sessions.appendMsg("info", escapeHtml(I18n.t("chat.history_load_failed")));
       }
+      return false;
     } finally {
-      state.loading = false;
+      if (state.controller === controller) {
+        state.loading = false;
+        state.replacing = false;
+        if (!succeeded) state.hasAfter = wasHistorical;
+      }
       // After loading finishes, re-evaluate the empty-state hint in case
       // the session is genuinely empty (no events + no existing DOM content).
-      if (id === _activeId) _updateEmptyHint();
+      if (id === _activeId) {
+        _updateEmptyHint();
+        _refreshEditButtons(RenderTarget.outer());
+      }
+    }
+    // A live message may have arrived after the server took its snapshot while
+    // this detached window was loading. Reconcile before resuming live output.
+    if (succeeded && !state.hasAfter && (state.liveRevision || 0) !== liveRevision && id === _activeId) {
+      return _fetchHistory(id, null, false, { replace: true });
     }
+    return succeeded;
   }
 
   // ── Private helpers ───────────────────────────────────────────────────
@@ -2238,7 +2297,7 @@ const Sessions = (() => {
   }
 
   function _refreshEditButtons(container, status) {
-    const running = (status || Sessions.find(Sessions.activeId)?.status) === "running";
+    const running = (status || Sessions.find(Sessions.activeId)?.status) === "running" || Sessions.isHistoricalWindow();
     const btns = Array.from(container.querySelectorAll(".msg-edit-btn"));
     btns.forEach((btn, i) => {
       btn.style.display = !running && i === btns.length - 1 ? "" : "none";
@@ -2256,6 +2315,7 @@ const Sessions = (() => {
   }
 
   function _enterEditMode(el) {
+    if (Sessions.isHistoricalWindow()) return;
     if (_activeSessionIsRunning() || el.classList.contains("editing")) return;
     el.classList.add("editing");
 
@@ -2330,6 +2390,7 @@ const Sessions = (() => {
   }
 
   function _submitEdit(el, newContent) {
+    if (Sessions.isHistoricalWindow()) return;
     if (!newContent) return;
     if (!Sessions.activeId) return;
     if (_activeSessionIsRunning()) {
@@ -2785,6 +2846,40 @@ const Sessions = (() => {
 
 
 
+  // Compact a working directory for the status bar: keep a short leading
+  // anchor (up to two segments, e.g. "/Users/leo") plus as many trailing
+  // segments as fit, ellipsising the middle so the current directory name
+  // stays visible. The full path lives in title/dataset, not here.
+  function _compactWorkingDir(p, maxLen = 40) {
+    if (!p) return p;
+    if (p.length <= maxLen) return p;
+
+    const abs = /^[\\/]/.test(p);
+    const segs = p.split(/[\\/]+/).filter((s) => s !== "");
+    if (!segs.length) return p;
+
+    // The final segment (current directory name) must always stay intact;
+    // shrink the leading anchor first when a longer tail won't fit.
+    for (let headCount = Math.min(2, segs.length - 1); headCount >= 0; headCount--) {
+      const headStr = headCount > 0
+        ? (abs ? "/" : "") + segs.slice(0, headCount).join("/")
+        : "";
+      let budget = maxLen - headStr.length - 3; // reserve "/…/"
+      const tail = [];
+      for (let i = segs.length - 1; i >= headCount; i--) {
+        const need = segs[i].length + (tail.length ? 1 : 0);
+        if (need > budget) break;
+        tail.unshift(segs[i]);
+        budget -= need;
+      }
+      if (tail.length) {
+        return (headStr ? headStr + "/…/" : "…/") + tail.join("/");
+      }
+    }
+    // Final segment alone exceeds maxLen — cut it (practically never).
+    return "…/" + segs[segs.length - 1].slice(-Math.max(1, maxLen - 2));
+  }
+
   // ── Public API ─────────────────────────────────────────────────────────
   return {
     get all()        { return _sessions; },
@@ -2850,6 +2945,10 @@ const Sessions = (() => {
       _initComposer();
       _initSearch();
       _initMessageHistory();
+      // Quote-on-selection: floating quote button over message selections.
+      // quote-select.js is loaded after sessions.js; it's available at init
+      // time because app.js (which calls Sessions.init()) loads last.
+      if (typeof QuoteSelect !== "undefined") QuoteSelect.init();
       _ensureAgentsLoaded().then(() => Sessions.renderList());
       // Re-render session list (badges/labels) when the user switches language
       document.addEventListener("langchange", () => Sessions.renderList());
@@ -2866,6 +2965,21 @@ 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) => {
+        // 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).
+        const localLink = e.target.closest("a[href]");
+        if (localLink) {
+          const href = localLink.getAttribute("href") || "";
+          if (/^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?([/?#]|$)/i.test(href) &&
+              ["localhost", "127.0.0.1", "::1"].includes(window.location.hostname) &&
+              window.Clacky && Clacky.Preview) {
+            e.preventDefault();
+            Clacky.Preview.open(href);
+            return;
+          }
+        }
+
         const link = e.target.closest("a[href^='file://']");
         if (!link) return;
         e.preventDefault();
@@ -2878,6 +2992,12 @@ const Sessions = (() => {
 
         const hostname = window.location.hostname;
         const isLocal = ["localhost", "127.0.0.1", "::1"].includes(hostname);
+
+        // Local deployments: open the file in the Files tab of the aside
+        // panel (inline preview; binary formats show an "open with app"
+        // fallback page). Fall back to the OS default handler when the
+        // viewer is unavailable.  Remote deployments: download the file.
+        if (isLocal && window.Clacky && Clacky.WorkspaceView && Clacky.WorkspaceView.openFile(filePath)) return;
         const action = isLocal ? "open" : "download";
 
         try {
@@ -3987,10 +4107,10 @@ const Sessions = (() => {
         }
       }
 
-      // Working dir — show full path
+      // Working dir — show a compacted path (middle-ellipsised), full path in title.
       const sibDir = $("sib-dir");
       if (sibDir && s.working_dir) {
-        sibDir.textContent = s.working_dir;
+        sibDir.textContent = _compactWorkingDir(s.working_dir);
         sibDir.title = `${s.working_dir} (${I18n.t("sib.dir.tooltip")})`;
         sibDir.dataset.workingDir = s.working_dir;
         sibDir.dataset.sessionId = s.id;
@@ -4896,6 +5016,7 @@ const Sessions = (() => {
 
     /** Load the most recent page of history for a session (called on first visit). */
     loadHistory(id) {
+      window.ChatNavigator?.setSession(id);
       return _fetchHistory(id, null, false);
     },
 
@@ -4903,7 +5024,41 @@ const Sessions = (() => {
     loadMoreHistory(id) {
       const state = _historyState[id];
       if (!state || !state.hasMore) return;
-      return _fetchHistory(id, state.oldestCreatedAt, true);
+      return _fetchHistory(id, state.beforeCursor, true);
+    },
+
+    isHistoricalWindow() {
+      const state = _historyState[_activeId];
+      return !!(state?.hasAfter || state?.replacing);
+    },
+
+    loadNewerHistory() {
+      const state = _historyState[_activeId];
+      if (!state?.hasAfter || !state.afterCursor) return;
+      return _fetchHistory(_activeId, null, false, { after: state.afterCursor });
+    },
+
+    jumpToHistory(roundId) {
+      return _fetchHistory(_activeId, null, false, { around: roundId, replace: true });
+    },
+
+    async loadLatestHistory() {
+      const id = _activeId;
+      const loaded = await _fetchHistory(id, null, false, { replace: true });
+      if (loaded && id === _activeId && Sessions.find(id)?.status === "running") {
+        WS.send({ type: "subscribe", session_id: id });
+      }
+      return loaded;
+    },
+
+    deferLiveHistory(event) {
+      if (!Sessions.isHistoricalWindow()) return false;
+      if (["history_user_message", "assistant_message", "tool_call", "tool_result"].includes(event.type)) {
+        const state = _historyState[_activeId];
+        state.liveRevision = (state.liveRevision || 0) + 1;
+      }
+      _showNewMessageBanner();
+      return true;
     },
 
     /** Check if there is more history to load for a session. */

data/lib/clacky/web/utils.js

@@ -56,6 +56,40 @@ const IME = (() => {
   return { track, bindEnter };
 })();
 
+// Compact, non-interactive Markdown for short previews. Only inline formatting
+// is emitted; raw HTML and images cannot introduce active content.
+const MarkdownPreview = (() => {
+  function render(text) {
+    if (!text) return "";
+    if (typeof marked === "undefined") return escapeHtml(text);
+
+    const renderer = new marked.Renderer();
+    renderer.html = renderer.image = renderer.checkbox = () => "";
+    renderer.hr = renderer.br = () => " ";
+    renderer.link = function({ tokens }) { return this.parser.parseInline(tokens); };
+    renderer.paragraph = renderer.heading = function({ tokens }) {
+      return this.parser.parseInline(tokens) + " ";
+    };
+    renderer.blockquote = renderer.listitem = function({ tokens }) {
+      return this.parser.parse(tokens).trim() + " ";
+    };
+    renderer.list = function({ items }) {
+      return items.map(item => this.listitem(item)).join("");
+    };
+    renderer.table = function({ header, rows }) {
+      return [header, ...rows].map(row => row.map(cell => this.parser.parseInline(cell.tokens)).join(" ")).join(" ") + " ";
+    };
+    renderer.code = function({ text }) { return `<code>${escapeHtml(text)}</code> `; };
+    try {
+      return marked.parse(text, { gfm: true, breaks: false, renderer }).trim();
+    } catch (_) {
+      return escapeHtml(text);
+    }
+  }
+
+  return { render };
+})();
+
 const Tooltip = (() => {
   const GAP = 8;
   let el = null;