@nextclaw/ui 0.20.2 → 0.21.0

package/src/features/chat/components/conversation/chat-conversation-content.tsx

@@ -15,6 +15,7 @@ import { ChatConversationTrack } from "@/features/chat/components/conversation/c
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import { SCROLL_BOTTOM_EDGE_FADE_CLASS } from "@/shared/components/ui/scroll-area";
 import { t } from "@/shared/lib/i18n";
+import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
 import type { SessionMessageToolPayloadState } from "@/features/chat/features/ncp/hooks/use-ncp-session-message-history";
 
 type ChatConversationContentProps = {
@@ -41,6 +42,13 @@ type ChatConversationContentProps = {
   welcomeSlot?: ReactNode;
 };
 
+function createConversationScrollRestorationKey(
+  sessionKey: string | null,
+  showWelcome: boolean,
+): string | null {
+  return sessionKey && !showWelcome ? `chat-conversation:${sessionKey}` : null;
+}
+
 export function ChatConversationContent({
   bottomSlot,
   canContinue = false,
@@ -61,9 +69,15 @@ export function ChatConversationContent({
   onEditMessage,
   welcomeSlot,
 }: ChatConversationContentProps) {
-  const threadRef = useRef<HTMLDivElement | null>(null);
-  const contentRef = useRef<HTMLDivElement | null>(null);
+  const threadRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
   const hasConversationContent = messages.length > 0 || isSending;
+  const scrollRestoration = useScrollRestoration({
+    restorationKey: createConversationScrollRestorationKey(sessionKey, showWelcome),
+    scrollRef: threadRef,
+    isEnabled: !showWelcome,
+  });
+  const { onScroll: onScrollPositionSave } = scrollRestoration;
   const { isAtBottom, onScroll, scrollToBottom } = useStickyBottomScroll({
     contentRef,
     scrollRef: threadRef,
@@ -75,6 +89,7 @@ export function ChatConversationContent({
   const hasMessages = messages.length > 0;
   const handleScroll = useCallback(
     (event: UIEvent<HTMLDivElement>) => {
+      onScrollPositionSave(event);
       onScroll();
       if (
         event.currentTarget.scrollTop <= 320 &&
@@ -89,6 +104,7 @@ export function ChatConversationContent({
       isLoadingPreviousMessages,
       onLoadPreviousMessages,
       onScroll,
+      onScrollPositionSave,
     ],
   );
   return (

package/src/features/chat/components/conversation/chat-conversation-workspace-section.tsx

@@ -29,6 +29,9 @@ export function ChatConversationWorkspaceSection({
     activeSideChatDraft,
     workspaceFileTabs,
     sessionCronJobs,
+    sessionCronJobsError,
+    sessionCronJobsLoading,
+    retrySessionCronJobs,
     showWorkspacePanel,
   } = useChatConversationWorkspaceState(snapshot, sessionKey);
 
@@ -49,6 +52,9 @@ export function ChatConversationWorkspaceSection({
       workspaceNavigationHistoryIndex={snapshot.workspaceNavigationHistoryIndex}
       activePanelKind={snapshot.activeWorkspacePanelKind ?? null}
       sessionCronJobs={sessionKey ? sessionCronJobs : []}
+      sessionCronJobsError={sessionKey ? sessionCronJobsError : false}
+      sessionCronJobsLoading={sessionKey ? sessionCronJobsLoading : false}
+      onRetrySessionCronJobs={retrySessionCronJobs}
       sessionProjectRoot={selectedSession?.projectRoot ?? draftProjectRoot}
       sessionWorkingDir={
         selectedSession?.workingDir ??

package/src/features/chat/components/layout/__tests__/chat-sidebar-session-area.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ChatSidebarSessionArea } from "@/features/chat/components/layout/chat-sidebar-desktop-layout";
 
-function renderSessionArea(isProjectFirstView: boolean) {
+function renderSessionArea(isProjectFirstView: boolean, onScrollNearEnd = vi.fn()) {
   const onAddProject = vi.fn();
   const onSelectMode = vi.fn();
 
@@ -14,6 +14,7 @@ function renderSessionArea(isProjectFirstView: boolean) {
       isLoading={false}
       isProjectFirstView={isProjectFirstView}
       onAddProject={onAddProject}
+      onScrollNearEnd={onScrollNearEnd}
       onSelectMode={onSelectMode}
       projectGroups={[]}
       projectCronJobCountByRoot={new Map()}
@@ -22,7 +23,7 @@ function renderSessionArea(isProjectFirstView: boolean) {
     />,
   );
 
-  return { onAddProject, onSelectMode };
+  return { onAddProject, onScrollNearEnd, onSelectMode };
 }
 
 describe("ChatSidebarSessionArea", () => {
@@ -87,4 +88,17 @@ describe("ChatSidebarSessionArea", () => {
 
     expect(onAddProject).toHaveBeenCalledOnce();
   });
+
+  it("requests the next page before scrolling reaches the end", () => {
+    const { onScrollNearEnd } = renderSessionArea(false);
+    const scroller = document.querySelector(".overflow-y-auto") as HTMLDivElement;
+    Object.defineProperties(scroller, {
+      scrollHeight: { value: 2_000 },
+      clientHeight: { value: 500 },
+    });
+
+    fireEvent.scroll(scroller, { target: { scrollTop: 1_000 } });
+
+    expect(onScrollNearEnd).toHaveBeenCalledOnce();
+  });
 });

package/src/features/chat/components/layout/chat-page-shell.tsx

@@ -8,6 +8,7 @@ import { useViewportLayout } from "@/app/hooks/use-viewport-layout";
 import { ChatMobileShell } from "@/platforms/mobile";
 import { InboxPage } from "@/features/inbox";
 import { PanelAppMainPage } from "@/features/panel-apps";
+import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
 export type MainPanelView = "chat" | "cron" | "skills" | "agents" | "inbox" | "panel-app";
 export type ChatPageProps = {
   view: MainPanelView;
@@ -36,6 +37,14 @@ type ChatPageLayoutProps = {
 };
 export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
   const { isMobile } = useViewportLayout();
+  const cronScroll = useScrollRestoration<HTMLDivElement>({
+    restorationKey: "main-page:cron",
+  });
+  const agentsScroll = useScrollRestoration<HTMLDivElement>({
+    restorationKey: "main-page:agents",
+  });
+  const { onScroll: onCronScroll, scrollRef: cronScrollRef } = cronScroll;
+  const { onScroll: onAgentsScroll, scrollRef: agentsScrollRef } = agentsScroll;
 
   return (
     <div className="h-full flex">
@@ -52,13 +61,21 @@ export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
           ) : view === "panel-app" ? (
             <PanelAppMainPage />
           ) : view === "cron" ? (
-            <div className="h-full overflow-auto custom-scrollbar">
+            <div
+              ref={cronScrollRef}
+              onScroll={onCronScroll}
+              className="h-full overflow-auto custom-scrollbar"
+            >
               <div className={`mx-auto w-full px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
                 <CronConfig />
               </div>
             </div>
           ) : view === "agents" ? (
-            <div className="h-full overflow-auto custom-scrollbar">
+            <div
+              ref={agentsScrollRef}
+              onScroll={onAgentsScroll}
+              className="h-full overflow-auto custom-scrollbar"
+            >
               <div className={`mx-auto w-full px-4 py-4 sm:px-6 sm:py-5 ${MANAGEMENT_PAGE_CANVAS_WIDTH_CLASS}`}>
                 <AgentsPage />
               </div>

package/src/features/chat/components/layout/chat-sidebar-desktop-layout.tsx

@@ -28,6 +28,7 @@ import { ChatSidebarUtilityMenu } from "@/features/chat/components/layout/chat-s
 import { PanelAppMainSidebarNav } from "@/features/panel-apps";
 import { isWindowsDesktopHost } from "@/platforms/desktop";
 import { viewportLayoutManager } from "@/app/managers/viewport-layout.manager";
+import { useScrollRestoration } from "@/shared/hooks/use-scroll-restoration";
 import {
   SIDEBAR_RAIL_CONTROL_CLASS,
   SIDEBAR_RAIL_ICON_CLASS,
@@ -154,6 +155,7 @@ export function ChatSidebarSessionArea({
   isLoading,
   isProjectFirstView,
   onAddProject,
+  onScrollNearEnd = () => undefined,
   onSelectMode,
   projectGroups,
   projectCronJobCountByRoot,
@@ -166,6 +168,7 @@ export function ChatSidebarSessionArea({
   isLoading: boolean;
   isProjectFirstView: boolean;
   onAddProject: () => void;
+  onScrollNearEnd?: () => void;
   onSelectMode: (mode: "time-first" | "project-first") => void;
   projectGroups: ReturnType<typeof groupSessionsByProject>;
   projectCronJobCountByRoot: ReadonlyMap<string, number>;
@@ -174,6 +177,11 @@ export function ChatSidebarSessionArea({
     typeof ChatSidebarSessionList
   >[0]["sessionTypeOptions"];
 }) {
+  const scrollRestoration = useScrollRestoration<HTMLDivElement>({
+    restorationKey: "chat-sidebar:sessions",
+    isEnabled: !isCollapsed,
+  });
+  const { onScroll: onScrollPositionSave, scrollRef } = scrollRestoration;
   if (isCollapsed) {
     return <div className="min-h-0 flex-1" aria-hidden="true" />;
   }
@@ -196,6 +204,14 @@ export function ChatSidebarSessionArea({
       </div>
 
       <div
+        ref={scrollRef}
+        onScroll={(event) => {
+          onScrollPositionSave(event);
+          const element = event.currentTarget;
+          if (element.scrollHeight - element.scrollTop - element.clientHeight < 600) {
+            onScrollNearEnd();
+          }
+        }}
         className={cn(
           "custom-scrollbar min-h-0 flex-1 overflow-y-auto px-3 pb-4 pt-1",
           SCROLL_BOTTOM_EDGE_FADE_CLASS,

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -120,7 +120,7 @@ export function ChatSidebar({
   const projectsQuery = useProjects();
   const projectCreateMutation = useCreateProject();
   const projectAddExistingMutation = useAddExistingProject();
-  const { allItems, isLoading, items } = useNcpSessionListView();
+  const { allItems, hasMore, isLoading, isLoadingMore, items, loadMore } = useNcpSessionListView();
   const { cronJobCountByProjectRoot, cronJobCountBySessionKey } =
     useChatSidebarContextCounts(allItems);
   const { language, setLanguage } = useI18n();
@@ -247,6 +247,7 @@ export function ChatSidebar({
       onTogglePinned={() =>
         presenter.chatSessionListManager.toggleSessionPinned(item.session.key)
       }
+      onDeleteSession={presenter.chatThreadManager.deleteSession}
     />
   );
   const createSessionAndOpenIfNeeded = (
@@ -343,6 +344,9 @@ export function ChatSidebar({
         isLoading={isLoading}
         isProjectFirstView={isProjectFirstView}
         onAddProject={openProjectAdd}
+        onScrollNearEnd={() => {
+          if (hasMore && !isLoadingMore) void loadMore();
+        }}
         onSelectMode={presenter.chatSessionListManager.setListMode}
         projectGroups={projectGroups}
         projectCronJobCountByRoot={cronJobCountByProjectRoot}

package/src/features/chat/features/message/utils/__tests__/chat-message-timeline-compaction.utils.test.ts

@@ -169,7 +169,7 @@ describe("mid-run compaction timeline projection", () => {
     ]);
   });
 
-  it("does not silently clamp an invalid canonical part boundary", () => {
+  it("does not render a temporarily unavailable canonical part boundary as a standalone marker", () => {
     const invalidCompaction = createCompactionMessage({
       assistantId: visibleMessage.id,
       coveredPartCount: 2,
@@ -183,7 +183,7 @@ describe("mid-run compaction timeline projection", () => {
     expect(buildChatMessageTimelineItems({
       rawMessages: [visibleMessage, invalidCompaction],
       messages: [{ id: visibleMessage.id } as never],
-    }).map((item) => item.kind)).toEqual(["message", "compaction"]);
+    }).map((item) => item.kind)).toEqual(["message"]);
   });
 
   it("offsets a continued assistant compaction within its canonical message", () => {

package/src/features/chat/features/message/utils/chat-message-timeline.utils.ts

@@ -252,12 +252,12 @@ function projectVisibleChatMessageState(
       .forEach((placement) => {
         if (
           !Number.isSafeInteger(placement.boundaryIndex) ||
-          placement.boundaryIndex < 0 ||
-          placement.boundaryIndex > message.parts.length
+          placement.boundaryIndex < 0
         ) {
           inlineCompactionMessageIds.delete(placement.serviceMessageId);
           return;
         }
+        if (placement.boundaryIndex > message.parts.length) return;
         parts.splice(placement.boundaryIndex + insertedCount, 0, {
           type: "extension",
           extensionType: CONTEXT_COMPACTION_PART_EXTENSION_TYPE,

package/src/features/chat/features/ncp/hooks/__tests__/use-ncp-session-list-view.test.tsx

@@ -9,12 +9,20 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock("@/features/chat/features/ncp/hooks/use-ncp-session-queries", () => ({
-  useNcpSessions: () => ({
+  useInfiniteNcpSessions: () => ({
     data: {
-      sessions: mocks.sessions,
-      total: mocks.sessions.length,
+      pages: [{
+        sessions: mocks.sessions,
+        total: mocks.sessions.length,
+        page: 1,
+        pageSize: 100,
+        hasMore: false,
+      }],
     },
     isLoading: false,
+    hasNextPage: false,
+    isFetchingNextPage: false,
+    fetchNextPage: vi.fn(),
   }),
 }));
 

package/src/features/chat/features/ncp/hooks/use-ncp-session-list-view.ts

@@ -1,9 +1,9 @@
-import { useMemo } from "react";
+import { useDeferredValue, useMemo } from "react";
 import type { SessionEntryView } from "@/shared/lib/api";
 import { sessionMatchesQuery } from "@/features/chat/features/session/utils/chat-session-display.utils";
 import { adaptNcpSessionSummaries } from "@/features/chat/features/session/utils/ncp-session-adapter.utils";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
-import { useNcpSessions } from "@/features/chat/features/ncp/hooks/use-ncp-session-queries";
+import { useInfiniteNcpSessions } from "@/features/chat/features/ncp/hooks/use-ncp-session-queries";
 import type { SessionRunStatus } from "@/features/chat/types/session-run-status.types";
 
 export type NcpSessionListItemView = {
@@ -30,15 +30,19 @@ export function useNcpSessionListView(
 ) {
   const storedQuery = useChatSessionListStore((state) => state.snapshot.query);
   const query = params.query ?? storedQuery;
-  const sessionsQuery = useNcpSessions({ limit: params.limit ?? 200 });
+  const deferredQuery = useDeferredValue(query);
+  const sessionsQuery = useInfiniteNcpSessions({
+    pageSize: params.limit ?? 100,
+    query: deferredQuery,
+  });
 
   const allItems = useMemo<NcpSessionListItemView[]>(() => {
-    const summaries = sessionsQuery.data?.sessions ?? [];
+    const summaries = sessionsQuery.data?.pages.flatMap((page) => page.sessions) ?? [];
     return adaptNcpSessionSummaries(summaries).map((session) => ({
       session,
       runStatus: session.status === "running" ? "running" : undefined,
     }));
-  }, [sessionsQuery.data?.sessions]);
+  }, [sessionsQuery.data?.pages]);
   const items = useMemo<NcpSessionListItemView[]>(() => {
     const visibleItems = allItems.filter(({ session }) =>
       shouldShowSessionInSidebar(session),
@@ -59,5 +63,8 @@ export function useNcpSessionListView(
     allItems,
     isLoading: sessionsQuery.isLoading,
     items,
+    hasMore: sessionsQuery.hasNextPage,
+    isLoadingMore: sessionsQuery.isFetchingNextPage,
+    loadMore: sessionsQuery.fetchNextPage,
   };
 }

package/src/features/chat/features/ncp/hooks/use-ncp-session-queries.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
   fetchNcpSessionObservations,
   fetchNcpSessionSkills,
@@ -21,6 +21,20 @@ export function useNcpSessions(params?: { limit?: number; peerId?: string }) {
   });
 }
 
+export function useInfiniteNcpSessions(params: { pageSize: number; query?: string }) {
+  return useInfiniteQuery({
+    queryKey: ['ncp-session-pages', params.pageSize, params.query?.trim() || null],
+    initialPageParam: 1,
+    queryFn: ({ pageParam }) => fetchNcpSessions({
+      page: pageParam,
+      pageSize: params.pageSize,
+      ...(params.query?.trim() ? { query: params.query.trim() } : {}),
+    }),
+    getNextPageParam: (lastPage) => lastPage.hasMore ? (lastPage.page ?? 1) + 1 : undefined,
+    ...ncpSessionQueryDefaults,
+  });
+}
+
 export function useNcpSessionSkills(params: {
   sessionId: string | null;
   projectRoot?: string | null;

package/src/features/chat/features/session/components/__tests__/chat-sidebar-session-item.test.tsx

@@ -5,6 +5,7 @@ import { ChatSidebarSessionItem } from "@/features/chat/features/session/compone
 
 const mocks = vi.hoisted(() => ({
   copyText: vi.fn(),
+  deleteSession: vi.fn(),
 }));
 
 vi.mock("@nextclaw/agent-chat-ui", () => ({
@@ -21,6 +22,7 @@ vi.mock("sonner", () => ({
 beforeEach(() => {
   mocks.copyText.mockReset();
   mocks.copyText.mockResolvedValue(true);
+  mocks.deleteSession.mockReset();
   render(
     <ChatSidebarSessionItem
       sessionKey="session:current"
@@ -50,6 +52,7 @@ beforeEach(() => {
       onSave={vi.fn()}
       onCancel={vi.fn()}
       onTogglePinned={vi.fn()}
+      onDelete={mocks.deleteSession}
     />,
   );
 });
@@ -87,6 +90,15 @@ it("copies the sidebar session ID from the more-actions menu", async () => {
   expect(mocks.copyText).toHaveBeenCalledWith("session:current");
 });
 
+it("deletes the sidebar session from the more-actions menu", async () => {
+  const user = userEvent.setup();
+
+  await user.click(screen.getByRole("button", { name: "More actions" }));
+  await user.click(screen.getByRole("button", { name: "Delete Session" }));
+
+  expect(mocks.deleteSession).toHaveBeenCalledOnce();
+});
+
 it("sizes the runtime icon to the session title text", () => {
   const runtimeIcon = screen.getByRole("img", { name: "Codex logo" });
 

package/src/features/chat/features/session/components/chat-sidebar-session-entry.tsx

@@ -32,6 +32,7 @@ export function ChatSidebarSessionEntry(props: {
   onSaveSessionLabel: (session: SessionEntryView) => void;
   onCancelEditingSessionLabel: () => void;
   onTogglePinned: () => void;
+  onDeleteSession: (sessionKey: string) => void;
 }) {
   const {
     item,
@@ -52,6 +53,7 @@ export function ChatSidebarSessionEntry(props: {
     onSaveSessionLabel,
     onCancelEditingSessionLabel,
     onTogglePinned,
+    onDeleteSession,
   } = props;
   const { session, runStatus } = item;
   const active = selectedSessionKey === session.key;
@@ -111,6 +113,7 @@ export function ChatSidebarSessionEntry(props: {
       onSave={() => onSaveSessionLabel(session)}
       onCancel={onCancelEditingSessionLabel}
       onTogglePinned={onTogglePinned}
+      onDelete={() => onDeleteSession(session.key)}
     />
   );
 }

package/src/features/chat/features/session/components/chat-sidebar-session-item.tsx

@@ -15,9 +15,11 @@ import {
   GitBranch,
   Pencil,
   Pin,
+  Trash2,
   X,
 } from "lucide-react";
 import { ChatSidebarContextCard } from "@/features/chat/features/session/components/chat-sidebar-context-card";
+import { ChatSessionHeaderMenuItem } from "@/features/chat/features/session/components/session-header/chat-session-header-menu-item";
 
 type ChatSidebarSessionItemProps = {
   sessionKey: string;
@@ -44,6 +46,7 @@ type ChatSidebarSessionItemProps = {
   onSave: () => void | Promise<void>;
   onCancel: () => void;
   onTogglePinned: () => void;
+  onDelete: () => void;
 };
 
 type ChatSidebarSessionEditingViewProps = Pick<
@@ -139,6 +142,7 @@ function ChatSidebarSessionDisplayView({
   onSelect,
   onStartEditing,
   onTogglePinned,
+  onDelete,
 }: ChatSidebarSessionDisplayViewProps) {
   return (
     <div className="group/session relative">
@@ -262,7 +266,14 @@ function ChatSidebarSessionDisplayView({
           sessionKey={sessionKey}
           triggerSize="sm"
           triggerTone="strong"
-        />
+        >
+          <ChatSessionHeaderMenuItem
+            icon={Trash2}
+            label={t("chatDeleteSession")}
+            onClick={onDelete}
+            destructive
+          />
+        </ChatSessionMoreActionsMenu>
       </div>
     </div>
   );
@@ -293,6 +304,7 @@ export function ChatSidebarSessionItem({
   onSave,
   onCancel,
   onTogglePinned,
+  onDelete,
 }: ChatSidebarSessionItemProps) {
   return (
     <div
@@ -332,6 +344,7 @@ export function ChatSidebarSessionItem({
           projectName={projectName}
           onStartEditing={onStartEditing}
           onTogglePinned={onTogglePinned}
+          onDelete={onDelete}
         />
       )}
     </div>

package/src/features/chat/features/session/utils/chat-session-deletion.utils.ts

@@ -0,0 +1,25 @@
+import type { ChatThreadSnapshot } from "@/features/chat/stores/chat-thread.store";
+
+export function createDeletedChatThreadStatePatch(): Partial<ChatThreadSnapshot> {
+  return {
+    sessionKey: null,
+    sessionTypeLabel: null,
+    agentId: null,
+    sessionDisplayName: undefined,
+    draftProjectRoot: null,
+    sessionProjectName: null,
+    canDeleteSession: false,
+    parentSessionKey: null,
+    parentSessionLabel: null,
+    workspacePanelParentKey: null,
+    activeWorkspacePanelKind: null,
+    childSessionTabs: [],
+    activeChildSessionKey: null,
+    activeSideChatDraft: null,
+    workspaceFileTabs: [],
+    activeWorkspaceFileKey: null,
+    closedWorkspaceTabEntries: [],
+    workspaceNavigationHistory: [],
+    workspaceNavigationHistoryIndex: 0,
+  };
+}

package/src/features/chat/features/workspace/components/__tests__/chat-session-token-usage.test.tsx

@@ -66,12 +66,15 @@ beforeEach(() => {
   mocks.query.isError = false;
 });
 
-it('shows totals, cache hit rate, and usage grouped by model', () => {
+it('shows totals, model calls, cache read ratio, and usage grouped by model', () => {
   render(<ChatSessionTokenUsage sessionKey="parent-1" />);
 
   expect(screen.getByText('Token usage')).toBeTruthy();
   expect(screen.getByText('1,490')).toBeTruthy();
   expect(screen.getAllByText('40%').length).toBeGreaterThan(0);
+  expect(screen.getByText('Model calls')).toBeTruthy();
+  expect(screen.getByText('Reported calls')).toBeTruthy();
+  expect(screen.getByText('2 agent rounds · 3 model calls · Cache read ratio: 40%')).toBeTruthy();
   expect(screen.getByText('openai/gpt-5')).toBeTruthy();
   expect(screen.getByText('anthropic/claude-sonnet-4')).toBeTruthy();
   expect(screen.getAllByText('Partial usage')).toHaveLength(2);