@nextclaw/ui 0.15.9 → 0.15.11

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

@@ -1,4 +1,9 @@
-import { useRef, type ReactNode } from "react";
+import {
+  useCallback,
+  useRef,
+  type ReactNode,
+  type UIEvent,
+} from "react";
 import { useStickyBottomScroll } from "@nextclaw/agent-chat-ui";
 import type { NcpMessage } from "@nextclaw/ncp";
 import { ArrowDown } from "lucide-react";
@@ -11,10 +16,14 @@ type ChatConversationContentProps = {
   bottomSlot?: ReactNode;
   isAwaitingAssistantOutput: boolean;
   isHistoryLoading: boolean;
+  hasPreviousMessages: boolean;
+  historyError: Error | null;
+  isLoadingPreviousMessages: boolean;
   isSending: boolean;
   messages: readonly NcpMessage[];
   sessionKey: string | null;
   showWelcome: boolean;
+  onLoadPreviousMessages: () => Promise<void>;
   welcomeSlot?: ReactNode;
 };
 
@@ -22,23 +31,20 @@ export function ChatConversationContent({
   bottomSlot,
   isAwaitingAssistantOutput,
   isHistoryLoading,
+  hasPreviousMessages,
+  historyError,
+  isLoadingPreviousMessages,
   isSending,
   messages,
   sessionKey,
   showWelcome,
+  onLoadPreviousMessages,
   welcomeSlot,
 }: ChatConversationContentProps) {
   const threadRef = useRef<HTMLDivElement | null>(null);
-  const hideEmptyHint =
-    isHistoryLoading &&
-    messages.length === 0 &&
-    !isSending &&
-    !isAwaitingAssistantOutput;
-  const {
-    isAtBottom,
-    onScroll,
-    scrollToBottom,
-  } = useStickyBottomScroll({
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const { isAtBottom, onScroll, scrollToBottom } = useStickyBottomScroll({
+    contentRef,
     scrollRef: threadRef,
     resetKey: sessionKey,
     isLoading: isHistoryLoading,
@@ -46,37 +52,75 @@ export function ChatConversationContent({
     contentVersion: messages[messages.length - 1] ?? null,
   });
   const hasMessages = messages.length > 0;
-  const showScrollToBottom = hasMessages && !showWelcome && !isAtBottom;
-
+  const handleScroll = useCallback(
+    (event: UIEvent<HTMLDivElement>) => {
+      onScroll();
+      if (
+        event.currentTarget.scrollTop <= 320 &&
+        hasPreviousMessages &&
+        !isLoadingPreviousMessages
+      ) {
+        void onLoadPreviousMessages();
+      }
+    },
+    [
+      hasPreviousMessages,
+      isLoadingPreviousMessages,
+      onLoadPreviousMessages,
+      onScroll,
+    ],
+  );
   return (
     <div className="relative min-h-0 flex-1">
       <div
         ref={threadRef}
-        onScroll={onScroll}
+        onScroll={handleScroll}
         data-chat-scroll-container="true"
         className="h-full overflow-y-auto custom-scrollbar"
+        style={{ overflowAnchor: "none" }}
       >
         {showWelcome ? (
-          welcomeSlot ?? null
+          (welcomeSlot ?? null)
         ) : (
-          <>
-            {hideEmptyHint || !hasMessages ? null : (
+          <div ref={contentRef}>
+            {hasMessages ? (
               <ChatConversationTrack className="py-4 sm:py-5">
+                {historyError ? (
+                  <div role="alert" className="flex h-8 justify-center">
+                    <button
+                      type="button"
+                      aria-label={t("chatHistoryRetry")}
+                      className="rounded px-1.5 text-xs text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      onClick={() => void onLoadPreviousMessages()}
+                    >
+                      {t("chatHistoryLoadFailed")} · {t("chatHistoryRetry")}
+                    </button>
+                  </div>
+                ) : isLoadingPreviousMessages ? (
+                  <span
+                    aria-hidden="true"
+                    className="mx-auto my-[9px] block h-1.5 w-1.5 animate-pulse rounded-full bg-muted-foreground/50"
+                  />
+                ) : null}
                 <ChatMessageListContainer
                   messages={messages}
-                  isSending={hasMessages && isSending && isAwaitingAssistantOutput}
+                  isSending={
+                    hasMessages && isSending && isAwaitingAssistantOutput
+                  }
+                  scrollRef={threadRef}
+                  sessionKey={sessionKey}
                 />
               </ChatConversationTrack>
-            )}
+            ) : null}
             {bottomSlot ? (
               <ChatConversationTrack className="pb-4 sm:pb-5">
                 {bottomSlot}
               </ChatConversationTrack>
             ) : null}
-          </>
+          </div>
         )}
       </div>
-      {showScrollToBottom ? (
+      {hasMessages && !showWelcome && !isAtBottom ? (
         <IconActionButton
           icon={<ArrowDown className="h-4 w-4" />}
           label={t("chatScrollToBottom")}

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

@@ -1,8 +1,10 @@
 import { useMemo } from "react";
+import { SquarePen } from "lucide-react";
 import { ChatConversationHeader } from "@/features/chat/components/conversation/chat-conversation-header";
 import { ChatSessionHeaderActions } from "@/features/chat/features/session/components/session-header/chat-session-header-actions";
 import { ChatSessionProjectBadge } from "@/features/chat/features/session/components/session-header/chat-session-project-badge";
 import { ChatSessionTitleSwitcher } from "@/features/chat/features/session/components/session-header/chat-session-title-switcher";
+import { useChatNewSessionTypePreference } from "@/features/chat/features/session-type/hooks/use-chat-new-session-type-preference";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
 import { useNcpChatSelectedSession } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
@@ -17,6 +19,7 @@ import { useChatSessionListStore } from "@/features/chat/stores/chat-session-lis
 import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
 import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
 import { AgentIdentityAvatar } from "@/shared/components/common/agent-identity";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import {
   getSessionProjectName,
   normalizeSessionProjectRootValue,
@@ -51,8 +54,15 @@ export function ChatConversationHeaderSection({
     () => buildSessionTypeOptions(sessionTypesData?.options ?? []),
     [sessionTypesData?.options],
   );
+  const defaultSessionType = normalizeSessionType(
+    sessionTypesData?.defaultType ?? DEFAULT_SESSION_TYPE,
+  );
+  const newSessionTypePreference = useChatNewSessionTypePreference({
+    defaultSessionType,
+    sessionTypeOptions,
+  });
   const sessionType = normalizeSessionType(
-    selectedSession?.sessionType ?? sessionTypesData?.defaultType ?? DEFAULT_SESSION_TYPE,
+    selectedSession?.sessionType ?? defaultSessionType,
   );
   const sessionTypeOption =
     sessionTypeOptions.find((option) => option.value === sessionType) ?? null;
@@ -145,17 +155,31 @@ export function ChatConversationHeaderSection({
       }
       actions={
         sessionKey ? (
-          <ChatSessionHeaderActions
-            sessionKey={sessionKey}
-            canDeleteSession={canDeleteSession}
-            isDeletePending={snapshot.isDeletePending}
-            currentPath={sessionProjectRoot ?? selectedSession?.workingDir ?? null}
-            defaultWorkspacePath={defaultWorkspacePath}
-            metadata={selectedSession?.metadata ?? null}
-            isWorkspaceOpen={isWorkspaceOpen}
-            onToggleWorkspace={toggleWorkspace}
-            onDeleteSession={presenter.chatThreadManager.deleteSession}
-          />
+          <div className="flex shrink-0 items-center gap-1.5">
+            {layoutMode === "mobile" ? (
+              <IconActionButton
+                icon={<SquarePen className="h-4 w-4" />}
+                label={t("chatSidebarNewTask")}
+                tooltip={false}
+                onClick={() =>
+                  presenter.chatSessionListManager.createSession({
+                    sessionType: newSessionTypePreference.selectedSessionType,
+                  })
+                }
+              />
+            ) : null}
+            <ChatSessionHeaderActions
+              sessionKey={sessionKey}
+              canDeleteSession={canDeleteSession}
+              isDeletePending={snapshot.isDeletePending}
+              currentPath={sessionProjectRoot ?? selectedSession?.workingDir ?? null}
+              defaultWorkspacePath={defaultWorkspacePath}
+              metadata={selectedSession?.metadata ?? null}
+              isWorkspaceOpen={isWorkspaceOpen}
+              onToggleWorkspace={toggleWorkspace}
+              onDeleteSession={presenter.chatThreadManager.deleteSession}
+            />
+          </div>
         ) : null
       }
     />

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

@@ -1,11 +1,9 @@
 import { useCallback } from "react";
 import { ChatConversationHeaderSection } from "@/features/chat/components/conversation/chat-conversation-header-section";
 import { ChatConversationParentBanner } from "@/features/chat/components/conversation/chat-conversation-parent-banner";
-import { ChatConversationSkeleton } from "@/features/chat/components/conversation/chat-conversation-skeleton";
 import { ChatConversationWorkspaceSection } from "@/features/chat/components/conversation/chat-conversation-workspace-section";
 import { usePresenter } from "@/features/chat/components/providers/chat-presenter.provider";
 import { SessionConversationArea } from "@/features/chat/features/conversation/components/session-conversation-area";
-import { useNcpChatProviderStateResolved } from "@/features/chat/features/ncp/hooks/use-ncp-chat-derived-state";
 import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
 
 type ChatConversationLayoutMode = "desktop" | "mobile";
@@ -18,7 +16,6 @@ export function ChatConversationPanel({
   onBackToList?: () => void;
 }) {
   const presenter = usePresenter();
-  const isProviderStateResolved = useNcpChatProviderStateResolved();
   const sessionKey = useChatSessionListStore(
     (state) => state.snapshot.selectedSessionKey,
   );
@@ -29,10 +26,6 @@ export function ChatConversationPanel({
     presenter.chatUiManager.goToSession(materializedSessionKey, { replace: true });
   }, [presenter]);
 
-  if (!isProviderStateResolved) {
-    return <ChatConversationSkeleton />;
-  }
-
   return (
     <section className="relative flex-1 min-h-0 flex overflow-hidden bg-background">
       <div className="flex min-h-0 flex-1 flex-col overflow-hidden">

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

@@ -15,7 +15,6 @@ const toolbarProps = {
   query: "",
   defaultSessionType: "native",
   sessionTypeOptions,
-  nonDefaultSessionTypeOptions: [sessionTypeOptions[1]],
   selectedNewSessionType: "native",
   selectedNewSessionTypeOption: sessionTypeOptions[0],
   isCreateMenuOpen: false,

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

@@ -68,6 +68,12 @@ function sidebarElement(variant?: "desktop" | "mobile") {
 function renderSidebar(variant?: "desktop" | "mobile") {
   return render(sidebarElement(variant));
 }
+function mockNewSessionTypePreference(value: string | null) {
+  mocks.fetchPreference.mockResolvedValue({
+    key: PREFERENCE_KEYS.chat.newSessionType,
+    value,
+  });
+}
 function expectCodexSelectedInSessionTypeMenu() {
   fireEvent.click(screen.getByLabelText("Session Type"));
   expect(
@@ -191,10 +197,7 @@ function resetSidebarTestState() {
   mocks.setLanguage.mockReset();
   mocks.setTheme.mockReset();
   mocks.fetchPreference.mockReset();
-  mocks.fetchPreference.mockResolvedValue({
-    key: PREFERENCE_KEYS.chat.newSessionType,
-    value: null,
-  });
+  mockNewSessionTypePreference(null);
   mocks.updatePreference.mockReset();
   mocks.updatePreference.mockImplementation(
     async (key: string, value: string) => ({
@@ -249,10 +252,7 @@ describe("ChatSidebar create and list basics", () => {
   });
 
   it("hydrates the desktop new-session type from stored preferences", async () => {
-    mocks.fetchPreference.mockResolvedValue({
-      key: PREFERENCE_KEYS.chat.newSessionType,
-      value: "codex",
-    });
+    mockNewSessionTypePreference("codex");
 
     renderSidebar();
 
@@ -335,6 +335,15 @@ describe("ChatSidebar create and list basics", () => {
     expect(mocks.goToChatRoot).not.toHaveBeenCalled();
   });
 
+  it("keeps every mobile runtime type visible once when the stored preference differs from the default", async () => {
+    mockNewSessionTypePreference("codex");
+    renderSidebar("mobile");
+    await waitFor(() => expect(mocks.fetchPreference).toHaveBeenCalled());
+    fireEvent.click(screen.getByRole("button", { name: "New Task" }));
+    expect(screen.getAllByText("Codex")).toHaveLength(1);
+    expect(screen.getByText("Native")).not.toBeNull();
+  });
+
   it("keeps low-frequency utility choices behind nested selectors", () => {
     renderSidebar();
 

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useLayoutEffect } from "react";
 import { ChatSidebar } from "@/features/chat/components/layout/chat-sidebar";
 import { ChatConversationPanel } from "@/features/chat/components/conversation/chat-conversation-panel";
 import { AgentsPage } from "@/features/agents";
@@ -25,7 +25,7 @@ export function useChatSessionSync(params: UseChatSessionSyncParams): void {
     syncRouteSessionSelection,
   } = params;
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     syncRouteSessionSelection({
       isChatView: view === "chat",
       routeSessionKey,

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

@@ -70,7 +70,6 @@ type ChatSidebarToolbarProps = {
   query: string;
   defaultSessionType: string;
   sessionTypeOptions: SessionTypeOption[];
-  nonDefaultSessionTypeOptions: SessionTypeOption[];
   selectedNewSessionType: string;
   selectedNewSessionTypeOption: SessionTypeOption | null;
   isCreateMenuOpen: boolean;
@@ -81,20 +80,6 @@ type ChatSidebarToolbarProps = {
   collapsed?: boolean;
 };
 
-function getMobileCreateOptions(params: {
-  defaultSessionType: string;
-  sessionTypeOptions: SessionTypeOption[];
-  nonDefaultSessionTypeOptions: SessionTypeOption[];
-}): SessionTypeOption[] {
-  const defaultOption = params.sessionTypeOptions.find(
-    (option) => option.value === params.defaultSessionType,
-  );
-  return [
-    ...(defaultOption ? [defaultOption] : []),
-    ...params.nonDefaultSessionTypeOptions,
-  ];
-}
-
 function SessionTypeTriggerIcon({
   option,
 }: {
@@ -276,18 +261,12 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
     query,
     defaultSessionType,
     sessionTypeOptions,
-    nonDefaultSessionTypeOptions,
     isCreateMenuOpen,
     onCreateMenuOpenChange,
     onCreateSession,
     onQueryChange,
   } = props;
-  const createOptions = getMobileCreateOptions({
-    defaultSessionType,
-    sessionTypeOptions,
-    nonDefaultSessionTypeOptions,
-  });
-  const hasCreateMenu = createOptions.length > 1;
+  const hasCreateMenu = sessionTypeOptions.length > 1;
 
   return (
     <div className="px-4 pb-2 pt-1">
@@ -320,7 +299,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps) {
               className="w-60 rounded-3xl border border-border bg-popover p-2 text-popover-foreground shadow-[0_24px_70px_-30px_rgba(15,23,42,0.45)]"
             >
               <ChatSessionTypeMenu
-                options={createOptions}
+                options={sessionTypeOptions}
                 selectedSessionType={defaultSessionType}
                 title={t("chatSidebarNewTask")}
                 titleClassName="pb-1.5 text-[11px] font-medium normal-case tracking-normal"

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

@@ -182,13 +182,6 @@ export function ChatSidebar({
       ),
     [sessionTypesData?.defaultType],
   );
-  const nonDefaultSessionTypeOptions = useMemo(
-    () =>
-      sessionTypeOptions.filter(
-        (option) => option.value !== defaultSessionType,
-      ),
-    [defaultSessionType, sessionTypeOptions],
-  );
   const newSessionTypePreference = useChatNewSessionTypePreference({
     defaultSessionType,
     sessionTypeOptions,
@@ -248,10 +241,10 @@ export function ChatSidebar({
     sessionType: string,
     projectRoot?: string | null,
   ) => {
-    presenter.chatSessionListManager.createSession(
+    presenter.chatSessionListManager.createSession({
+      projectRoot: typeof projectRoot === "string" ? projectRoot : undefined,
       sessionType,
-      typeof projectRoot === "string" ? projectRoot : undefined,
-    );
+    });
   };
   const openProjectCreate = () => {
     projectCreateMutation.reset();
@@ -289,7 +282,6 @@ export function ChatSidebar({
           query={listSnapshot.query}
           defaultSessionType={newSessionTypePreference.selectedSessionType}
           sessionTypeOptions={sessionTypeOptions}
-          nonDefaultSessionTypeOptions={nonDefaultSessionTypeOptions}
           selectedNewSessionType={newSessionTypePreference.selectedSessionType}
           selectedNewSessionTypeOption={
             newSessionTypePreference.selectedSessionTypeOption
@@ -307,7 +299,6 @@ export function ChatSidebar({
           query={listSnapshot.query}
           defaultSessionType={defaultSessionType}
           sessionTypeOptions={sessionTypeOptions}
-          nonDefaultSessionTypeOptions={nonDefaultSessionTypeOptions}
           selectedNewSessionType={newSessionTypePreference.selectedSessionType}
           selectedNewSessionTypeOption={
             newSessionTypePreference.selectedSessionTypeOption