chore(release): v0.5.1

Session-watcher / picker-refresh release.

- New: viewport-driven picker refresh (IntersectionObserver + heartbeat)
- Fixed: TUI subscription to picker-refresh event (was picker-update)
- Fixed: web picker re-fetch on picker-refresh SSE signal

See CHANGELOG.md for details.

Author: delexw

CHANGELOG.md

@@ -0,0 +1,39 @@
+# Changelog
+
+All notable changes to claude-code-trace are documented here. Versions follow
+[semantic versioning](https://semver.org/).
+
+## [0.5.1] — 2026-05-20
+
+A release focused entirely on the session-watcher / picker-refresh path. Brings the picker
+closer to a live view: the cards you can see on screen update without waiting for filesystem
+events, and a long-standing TUI bug that silently disabled picker auto-refresh is fixed.
+
+### Added
+
+- **Viewport-driven picker refresh in the web frontend**. The picker now wraps every session
+  card in a shared `IntersectionObserver` (`useVisibleSessions` hook) and re-fetches the
+  session list whenever the visible set changes — debounced 150 ms — plus a 2 s heartbeat
+  while any cards are visible. This means the cards the user is actually looking at stay
+  fresh without paying the cost of polling everything all the time, and ongoing-status /
+  token-count badges update much closer to real time. Verified end-to-end in a real browser
+  (Chromium): 549/549 cards observed, scroll triggers a `POST /api/sessions` at ~T+1.3 s,
+  then the heartbeat keeps the list fresh while the picker is mounted.
+
+### Fixed
+
+- **TUI picker auto-refresh**
+  ([`ebb2ca5`](https://github.com/delexw/claude-code-trace/commit/ebb2ca5)). The terminal UI
+  subscribed to a non-existent `picker-update` event and destructured `payload.sessions` from
+  it, while the backend emits `picker-refresh` with an empty payload
+  (`src-tauri/src/watcher.rs:340`). The TUI picker never auto-updated when sessions changed
+  on disk — it only refreshed when the user re-entered the picker view. The TUI now
+  subscribes to `picker-refresh` and re-fetches via `api.discoverSessions(dirs)`, mirroring
+  the web frontend pattern in `src/hooks/usePicker.ts`.
+
+- **Web picker re-fetch on `picker-refresh` signal**
+  ([`01f8212`](https://github.com/delexw/claude-code-trace/commit/01f8212)). Memoise the most
+  recent `projectDirs` in a ref so the SSE handler can re-issue `discover_sessions` without
+  the caller needing to thread state through.
+
+[0.5.1]: https://github.com/delexw/claude-code-trace/releases/tag/v0.5.1

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-trace",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": true,
   "bin": {
     "cctrace": "./bin/cctrace.mjs"

package.json

@@ -1,6 +1,6 @@
 [package]
 name = "claude-code-trace"
-version = "0.5.0"
+version = "0.5.1"
 edition = "2021"
 rust-version = "1.77.2"
 

src-tauri/Cargo.lock

@@ -312,6 +312,7 @@ export function App() {
             onSelect={handleSelectSession}
             onSearchChange={picker.setSearchQuery}
             onSelectIndex={setPickerSelectedIndex}
+            onVisiblePathsChange={picker.refresh}
           />
         );
 

src-tauri/Cargo.toml

@@ -1,8 +1,44 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, fireEvent, act } from "@testing-library/react";
 import { SessionPicker } from "./SessionPicker";
 import type { SessionInfo } from "../types";
 
+type IOCallback = (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void;
+
+class FakeIO {
+  static last: FakeIO | null = null;
+  cb: IOCallback;
+  observed: Element[] = [];
+  observe = (el: Element) => {
+    this.observed.push(el);
+  };
+  unobserve = vi.fn();
+  disconnect = vi.fn();
+  takeRecords = vi.fn(() => [] as IntersectionObserverEntry[]);
+  root = null;
+  rootMargin = "";
+  thresholds: number[] = [];
+  constructor(cb: IOCallback) {
+    this.cb = cb;
+    FakeIO.last = this;
+  }
+  trigger(els: Element[]) {
+    const entries = els.map(
+      (el) =>
+        ({
+          target: el,
+          isIntersecting: true,
+          intersectionRatio: 1,
+          boundingClientRect: new DOMRect(),
+          intersectionRect: new DOMRect(),
+          rootBounds: new DOMRect(),
+          time: 0,
+        }) as unknown as IntersectionObserverEntry,
+    );
+    this.cb(entries, this as unknown as IntersectionObserver);
+  }
+}
+
 function makeSession(overrides: Partial<SessionInfo> = {}): SessionInfo {
   return {
     path: "/home/user/.claude/projects/proj/session1.jsonl",
@@ -191,4 +227,60 @@ describe("SessionPicker", () => {
     );
     expect(screen.queryByText(/Discovering sessions/)).not.toBeInTheDocument();
   });
+
+  describe("viewport-aware visibility tracking", () => {
+    beforeEach(() => {
+      FakeIO.last = null;
+      (globalThis as { IntersectionObserver: unknown }).IntersectionObserver = FakeIO;
+      vi.useFakeTimers();
+    });
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("observes each session card and reports visible paths via onVisiblePathsChange", () => {
+      const onVisible = vi.fn();
+      const sessions = [
+        makeSession({ path: "/a.jsonl", session_id: "a", first_message: "alpha" }),
+        makeSession({ path: "/b.jsonl", session_id: "b", first_message: "beta" }),
+      ];
+      render(
+        <SessionPicker
+          sessions={sessions}
+          loading={false}
+          searchQuery=""
+          selectedIndex={0}
+          onSelect={vi.fn()}
+          onSearchChange={vi.fn()}
+          onVisiblePathsChange={onVisible}
+        />,
+      );
+      expect(FakeIO.last).not.toBeNull();
+      expect(FakeIO.last!.observed).toHaveLength(2);
+
+      act(() => {
+        FakeIO.last!.trigger(FakeIO.last!.observed);
+        vi.advanceTimersByTime(150);
+      });
+      expect(onVisible).toHaveBeenCalledExactlyOnceWith(
+        expect.arrayContaining(["/a.jsonl", "/b.jsonl"]),
+      );
+    });
+
+    it("works without onVisiblePathsChange (no-op observer)", () => {
+      const sessions = [makeSession()];
+      expect(() =>
+        render(
+          <SessionPicker
+            sessions={sessions}
+            loading={false}
+            searchQuery=""
+            selectedIndex={0}
+            onSelect={vi.fn()}
+            onSearchChange={vi.fn()}
+          />,
+        ),
+      ).not.toThrow();
+    });
+  });
 });

src/App.tsx

@@ -1,5 +1,6 @@
 import { useRef, useMemo } from "react";
 import { useScrollToSelected } from "../hooks/useScrollToSelected";
+import { useVisibleSessions } from "../hooks/useVisibleSessions";
 import type { SessionInfo } from "../types";
 import { OngoingDots } from "./OngoingDots";
 import {
@@ -12,6 +13,7 @@ import {
   shortModel,
 } from "../lib/format";
 import { getModelColor } from "../lib/theme";
+import { mergeRefs } from "../lib/mergeRefs";
 import { BsClaude } from "react-icons/bs";
 import { TokensIcon, CostIcon, ForwardIcon } from "./Icons";
 
@@ -23,6 +25,12 @@ interface SessionPickerProps {
   onSelect: (session: SessionInfo) => void;
   onSearchChange: (query: string) => void;
   onSelectIndex?: (index: number) => void;
+  /**
+   * Called (debounced) with the paths of session cards currently in the viewport,
+   * and again periodically on a heartbeat while any cards remain visible. The caller
+   * uses this as a cue to refresh fresh session info.
+   */
+  onVisiblePathsChange?: (paths: string[]) => void;
 }
 
 export function SessionPicker({
@@ -33,10 +41,12 @@ export function SessionPicker({
   onSelect,
   onSearchChange,
   onSelectIndex,
+  onVisiblePathsChange,
 }: SessionPickerProps) {
   const listRef = useRef<HTMLDivElement>(null);
   const selectedRef = useScrollToSelected(selectedIndex);
   const searchRef = useRef<HTMLInputElement>(null);
+  const registerVisible = useVisibleSessions(onVisiblePathsChange ?? noop);
 
   const dateGroups = groupByDate(sessions);
 
@@ -106,7 +116,7 @@ export function SessionPicker({
               return (
                 <div
                   key={session.path}
-                  ref={isSelected ? selectedRef : undefined}
+                  ref={mergeRefs(isSelected ? selectedRef : null, registerVisible(session.path))}
                   className={`picker__session${isSelected ? " picker__session--selected" : ""}${session.is_ongoing ? " picker__session--ongoing" : ""}`}
                   onMouseEnter={() => onSelectIndex?.(idx)}
                   onClick={() => onSelect(session)}
@@ -169,3 +179,5 @@ export function SessionPicker({
     </div>
   );
 }
+
+function noop() {}

src/components/SessionPicker.test.tsx

@@ -48,6 +48,20 @@ export function usePicker(selectedProject: string | null = null) {
     [fetchSessions],
   );
 
+  /**
+   * Re-fetch the session list using the most recently supplied project dirs.
+   * Used by the viewport-aware picker to refresh visible cards eagerly,
+   * independent of file-system events. Cheap: coalesced by the backend's
+   * sessions cache.
+   */
+  const refresh = useCallback(() => {
+    const dirs = projectDirsRef.current;
+    if (!dirs) return;
+    fetchSessions(dirs).catch((err) => {
+      console.error("Failed to refresh sessions:", err);
+    });
+  }, [fetchSessions]);
+
   const setSearchQuery = useCallback((query: string) => {
     setState((prev) => ({ ...prev, searchQuery: query }));
   }, []);
@@ -104,6 +118,7 @@ export function usePicker(selectedProject: string | null = null) {
     searchQuery: state.searchQuery,
     setSearchQuery,
     discoverSessions,
+    refresh,
     updateSessionOngoing,
   };
 }