@nextclaw/ui 0.14.1-beta.0 → 0.14.1

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

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { ChatSessionTypeOptionItem } from "@/features/chat/features/session-type/components/chat-session-type-option-item";
 
@@ -59,4 +59,30 @@ describe("ChatSessionTypeOptionItem", () => {
     expect(screen.getByRole("button", { name: /native/i })).toBeTruthy();
     expect(screen.getByText("Native")).toBeTruthy();
   });
+
+  it("marks selected options and does not call select when disabled", () => {
+    const onSelect = vi.fn();
+
+    render(
+      <ChatSessionTypeOptionItem
+        disabled
+        selected
+        option={{
+          value: "claude",
+          label: "Claude",
+          ready: false,
+          reasonMessage: "Configure a provider API key first.",
+        }}
+        onSelect={onSelect}
+      />,
+    );
+
+    const optionButton = screen.getByRole("button", { name: /claude/i });
+    expect(optionButton.getAttribute("aria-pressed")).toBe("true");
+    expect((optionButton as HTMLButtonElement).disabled).toBe(true);
+
+    fireEvent.click(optionButton);
+
+    expect(onSelect).not.toHaveBeenCalled();
+  });
 });

package/src/features/chat/features/session-type/components/{chat-sidebar-create-menu.tsx → chat-session-type-menu.tsx}

@@ -1,27 +1,38 @@
 import { ChatSessionTypeOptionItem } from "@/features/chat/features/session-type/components/chat-session-type-option-item";
 import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
+import { createPopoverAvailableHeightLimit } from "@/shared/components/ui/popover";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
 type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
+const CHAT_SESSION_TYPE_MENU_MAX_HEIGHT =
+  createPopoverAvailableHeightLimit("18rem");
+const CHAT_SESSION_TYPE_MENU_STYLE = {
+  maxHeight: CHAT_SESSION_TYPE_MENU_MAX_HEIGHT,
+};
 
-type ChatSidebarCreateMenuProps = {
+type ChatSessionTypeMenuProps = {
   options: readonly SessionTypeOption[];
   onSelect: (sessionType: string) => void;
+  selectedSessionType?: string;
   title?: string;
   className?: string;
   titleClassName?: string;
 };
 
-export function ChatSidebarCreateMenu({
+export function ChatSessionTypeMenu({
   className,
   onSelect,
   options,
+  selectedSessionType,
   title = t("chatSessionTypeLabel"),
   titleClassName,
-}: ChatSidebarCreateMenuProps) {
+}: ChatSessionTypeMenuProps) {
   return (
-    <div className={cn("space-y-1", className)}>
+    <div
+      className={cn("space-y-1 overflow-y-auto overscroll-contain", className)}
+      style={CHAT_SESSION_TYPE_MENU_STYLE}
+    >
       <div
         className={cn(
           "px-3 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-gray-400",
@@ -33,7 +44,9 @@ export function ChatSidebarCreateMenu({
       {options.map((option) => (
         <ChatSessionTypeOptionItem
           key={option.value}
+          disabled={option.ready === false}
           option={option}
+          selected={option.value === selectedSessionType}
           onSelect={() => onSelect(option.value)}
         />
       ))}

package/src/features/chat/features/session-type/components/chat-session-type-option-item.tsx

@@ -2,15 +2,18 @@ import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store"
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
 import { StatusDot } from "@/shared/components/status/status-dot";
 import { t } from "@/shared/lib/i18n";
-import { Bot } from "lucide-react";
+import { cn } from "@/shared/lib/utils";
+import { Bot, Check } from "lucide-react";
 
 type SessionTypeOption = ChatInputSnapshot["sessionTypeOptions"][number];
 
 export function ChatSessionTypeOptionItem(props: {
   option: SessionTypeOption;
+  selected?: boolean;
+  disabled?: boolean;
   onSelect: () => void;
 }) {
-  const { option, onSelect } = props;
+  const { disabled = false, option, onSelect, selected = false } = props;
   const helperText =
     option.ready === false
       ? option.reasonMessage?.trim() || t("statusSetup")
@@ -19,8 +22,14 @@ export function ChatSessionTypeOptionItem(props: {
   return (
     <button
       type="button"
+      aria-pressed={selected}
+      disabled={disabled}
       onClick={onSelect}
-      className="w-full rounded-2xl px-3 py-2.5 text-left transition-colors hover:bg-gray-50"
+      className={cn(
+        "w-full rounded-2xl px-3 py-2.5 text-left transition-colors",
+        selected ? "bg-gray-50" : "hover:bg-gray-50",
+        disabled ? "cursor-not-allowed opacity-70" : null,
+      )}
     >
       <div className="flex items-start gap-3">
         <div className="flex min-w-0 flex-1 items-start gap-2.5">
@@ -56,6 +65,9 @@ export function ChatSessionTypeOptionItem(props: {
             ) : null}
           </div>
         </div>
+        {selected ? (
+          <Check className="mt-1 h-3.5 w-3.5 shrink-0 text-primary" />
+        ) : null}
       </div>
     </button>
   );

package/src/features/chat/features/session-type/hooks/__tests__/use-chat-new-session-type-preference.test.tsx

@@ -0,0 +1,152 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { PREFERENCE_KEYS } from "@/shared/lib/api";
+import { useChatNewSessionTypePreference } from "@/features/chat/features/session-type/hooks/use-chat-new-session-type-preference";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+
+const mocks = vi.hoisted(() => ({
+  fetchPreference: vi.fn(),
+  updatePreference: vi.fn(),
+}));
+
+vi.mock("@/shared/lib/api", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...(actual as Record<string, unknown>),
+    fetchPreference: mocks.fetchPreference,
+    updatePreference: mocks.updatePreference,
+  };
+});
+
+const sessionTypeOptions: ChatSessionTypeOption[] = [
+  {
+    value: "native",
+    label: "Native",
+    icon: null,
+    ready: true,
+    reason: null,
+    reasonMessage: null,
+    supportedModels: undefined,
+    recommendedModel: null,
+    modelSelectionMode: "nextclaw",
+    runtimeDefaultThinking: null,
+    cta: null,
+  },
+  {
+    value: "codex",
+    label: "Codex",
+    icon: null,
+    ready: true,
+    reason: null,
+    reasonMessage: null,
+    supportedModels: undefined,
+    recommendedModel: null,
+    modelSelectionMode: "runtime-default",
+    runtimeDefaultThinking: null,
+    cta: null,
+  },
+];
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    );
+  };
+}
+
+describe("useChatNewSessionTypePreference", () => {
+  beforeEach(() => {
+    mocks.fetchPreference.mockReset();
+    mocks.updatePreference.mockReset();
+    mocks.fetchPreference.mockResolvedValue({
+      key: PREFERENCE_KEYS.chat.newSessionType,
+      value: null,
+    });
+    mocks.updatePreference.mockImplementation(
+      async (key: string, value: string) => ({
+        key,
+        value,
+        updatedAt: "2026-06-17T00:00:00.000Z",
+      }),
+    );
+  });
+
+  it("uses the stored new-session type when it is selectable", async () => {
+    mocks.fetchPreference.mockResolvedValue({
+      key: PREFERENCE_KEYS.chat.newSessionType,
+      value: "codex",
+    });
+
+    const { result } = renderHook(
+      () =>
+        useChatNewSessionTypePreference({
+          defaultSessionType: "native",
+          sessionTypeOptions,
+        }),
+      { wrapper: createWrapper() },
+    );
+
+    await waitFor(() => {
+      expect(result.current.selectedSessionType).toBe("codex");
+    });
+  });
+
+  it("falls back to the default type when the stored type is not selectable", async () => {
+    mocks.fetchPreference.mockResolvedValue({
+      key: PREFERENCE_KEYS.chat.newSessionType,
+      value: "claude",
+    });
+
+    const { result } = renderHook(
+      () =>
+        useChatNewSessionTypePreference({
+          defaultSessionType: "native",
+          sessionTypeOptions,
+        }),
+      { wrapper: createWrapper() },
+    );
+
+    await waitFor(() => {
+      expect(result.current.selectedSessionType).toBe("native");
+    });
+  });
+
+  it("persists only selectable session types", async () => {
+    const { result } = renderHook(
+      () =>
+        useChatNewSessionTypePreference({
+          defaultSessionType: "native",
+          sessionTypeOptions,
+        }),
+      { wrapper: createWrapper() },
+    );
+
+    act(() => {
+      result.current.setSelectedSessionType("codex");
+    });
+
+    await waitFor(() => {
+      expect(mocks.updatePreference).toHaveBeenCalledWith(
+        PREFERENCE_KEYS.chat.newSessionType,
+        "codex",
+      );
+    });
+
+    act(() => {
+      result.current.setSelectedSessionType("claude");
+    });
+
+    expect(mocks.updatePreference).toHaveBeenCalledTimes(1);
+  });
+});

package/src/features/chat/features/session-type/hooks/use-chat-new-session-type-preference.ts

@@ -0,0 +1,159 @@
+import { useCallback, useMemo } from "react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  fetchPreference,
+  PREFERENCE_KEYS,
+  updatePreference,
+  type PreferenceEntryView,
+} from "@/shared/lib/api";
+import {
+  normalizeSessionType,
+  type ChatSessionTypeOption,
+} from "@/features/chat/features/session-type/utils/chat-session-type.utils";
+
+const CHAT_NEW_SESSION_TYPE_PREFERENCE_KEY =
+  PREFERENCE_KEYS.chat.newSessionType;
+const chatNewSessionTypePreferenceQueryKey = [
+  "preference",
+  CHAT_NEW_SESSION_TYPE_PREFERENCE_KEY,
+] as const;
+
+type UseChatNewSessionTypePreferenceParams = {
+  defaultSessionType: string;
+  sessionTypeOptions: readonly ChatSessionTypeOption[];
+};
+
+function findSelectableSessionTypeOption(
+  sessionType: string,
+  sessionTypeOptions: readonly ChatSessionTypeOption[],
+): ChatSessionTypeOption | null {
+  const normalizedSessionType = normalizeSessionType(sessionType);
+  return (
+    sessionTypeOptions.find(
+      (option) =>
+        option.value === normalizedSessionType && option.ready !== false,
+    ) ?? null
+  );
+}
+
+function resolveNewSessionTypeOption(params: {
+  preferredSessionType: string | null;
+  defaultSessionType: string;
+  sessionTypeOptions: readonly ChatSessionTypeOption[];
+}): ChatSessionTypeOption {
+  const { defaultSessionType, preferredSessionType, sessionTypeOptions } =
+    params;
+  const preferredOption = preferredSessionType
+    ? findSelectableSessionTypeOption(preferredSessionType, sessionTypeOptions)
+    : null;
+  const defaultOption = findSelectableSessionTypeOption(
+    defaultSessionType,
+    sessionTypeOptions,
+  );
+  return (
+    preferredOption ??
+    defaultOption ??
+    sessionTypeOptions.find((option) => option.ready !== false) ??
+    sessionTypeOptions[0] ?? {
+      value: normalizeSessionType(defaultSessionType),
+      label: normalizeSessionType(defaultSessionType),
+      icon: null,
+      ready: true,
+      reason: null,
+      reasonMessage: null,
+      supportedModels: undefined,
+      recommendedModel: null,
+      modelSelectionMode: "nextclaw",
+      runtimeDefaultThinking: null,
+      cta: null,
+    }
+  );
+}
+
+function readPreferredSessionType(entry: PreferenceEntryView | undefined) {
+  return typeof entry?.value === "string"
+    ? normalizeSessionType(entry.value)
+    : null;
+}
+
+export function useChatNewSessionTypePreference({
+  defaultSessionType,
+  sessionTypeOptions,
+}: UseChatNewSessionTypePreferenceParams) {
+  const queryClient = useQueryClient();
+  const preferenceQuery = useQuery({
+    queryKey: chatNewSessionTypePreferenceQueryKey,
+    queryFn: () => fetchPreference(CHAT_NEW_SESSION_TYPE_PREFERENCE_KEY),
+    staleTime: 30_000,
+    retry: false,
+  });
+  const preferredSessionType = useMemo(
+    () => readPreferredSessionType(preferenceQuery.data),
+    [preferenceQuery.data],
+  );
+  const selectedSessionTypeOption = useMemo(
+    () =>
+      resolveNewSessionTypeOption({
+        preferredSessionType,
+        defaultSessionType,
+        sessionTypeOptions,
+      }),
+    [defaultSessionType, preferredSessionType, sessionTypeOptions],
+  );
+  const updateNewSessionType = useMutation({
+    mutationFn: async (sessionType: string) =>
+      await updatePreference(
+        CHAT_NEW_SESSION_TYPE_PREFERENCE_KEY,
+        normalizeSessionType(sessionType),
+      ),
+    onMutate: async (sessionType) => {
+      const normalizedSessionType = normalizeSessionType(sessionType);
+      await queryClient.cancelQueries({
+        queryKey: chatNewSessionTypePreferenceQueryKey,
+      });
+      const previous = queryClient.getQueryData<PreferenceEntryView>(
+        chatNewSessionTypePreferenceQueryKey,
+      );
+      queryClient.setQueryData<PreferenceEntryView>(
+        chatNewSessionTypePreferenceQueryKey,
+        {
+          key: CHAT_NEW_SESSION_TYPE_PREFERENCE_KEY,
+          value: normalizedSessionType,
+          updatedAt: new Date().toISOString(),
+        },
+      );
+      return { previous };
+    },
+    onError: (_error, _sessionType, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(
+          chatNewSessionTypePreferenceQueryKey,
+          context.previous,
+        );
+      }
+    },
+    onSuccess: (entry) => {
+      queryClient.setQueryData(chatNewSessionTypePreferenceQueryKey, entry);
+    },
+  });
+  const setSelectedSessionType = useCallback(
+    (sessionType: string) => {
+      const nextOption = findSelectableSessionTypeOption(
+        sessionType,
+        sessionTypeOptions,
+      );
+      if (!nextOption) {
+        return;
+      }
+      updateNewSessionType.mutate(nextOption.value);
+    },
+    [sessionTypeOptions, updateNewSessionType],
+  );
+
+  return {
+    selectedSessionType: selectedSessionTypeOption.value,
+    selectedSessionTypeOption,
+    isLoading: preferenceQuery.isLoading,
+    setSelectedSessionType,
+  };
+}

package/src/features/chat/features/welcome/components/__tests__/chat-conversation-welcome.test.tsx

@@ -0,0 +1,193 @@
+import type { ReactNode } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ChatConversationWelcome } from "@/features/chat/features/welcome/components/chat-conversation-welcome";
+import { useChatInputStore } from "@/features/chat/stores/chat-input.store";
+import { useChatQueryStore } from "@/features/chat/stores/ncp-chat-query.store";
+import { useChatSessionListStore } from "@/features/chat/stores/chat-session-list.store";
+import { useChatThreadStore } from "@/features/chat/stores/chat-thread.store";
+import type { ChatQuerySnapshot } from "@/features/chat/stores/ncp-chat-query.store";
+
+const mocks = vi.hoisted(() => ({
+  setSelectedAgentId: vi.fn(),
+  applyPromptSuggestion: vi.fn(),
+  setPendingProjectRoot: vi.fn(),
+  setPendingSessionType: vi.fn(),
+  agents: [
+    { id: "main", displayName: "Main", runtime: "native" },
+    { id: "engineer", displayName: "Engineer", runtime: "codex" },
+  ],
+}));
+
+vi.mock("@/features/chat/features/welcome/components/chat-welcome", () => ({
+  ChatWelcome: ({
+    inputSlot,
+    onSelectAgent,
+    onSelectPrompt,
+    onSelectProjectRoot,
+    onSelectSessionType,
+  }: {
+    inputSlot: ReactNode;
+    onSelectAgent: (agentId: string) => void;
+    onSelectPrompt: (prompt: string) => void;
+    onSelectProjectRoot: (projectRoot: string) => void;
+    onSelectSessionType: (sessionType: string) => void;
+  }) => (
+    <div>
+      {inputSlot}
+      <button type="button" onClick={() => onSelectAgent("engineer")}>
+        switch draft agent
+      </button>
+      <button type="button" onClick={() => onSelectPrompt("example prompt")}>
+        pick prompt
+      </button>
+      <button type="button" onClick={() => onSelectSessionType("codex")}>
+        switch session type
+      </button>
+      <button
+        type="button"
+        onClick={() => onSelectProjectRoot("/tmp/project-alpha")}
+      >
+        select draft project
+      </button>
+    </div>
+  ),
+}));
+
+vi.mock("@/features/chat/components/providers/chat-presenter.provider", () => ({
+  usePresenter: () => ({
+    chatSessionListManager: {
+      setSelectedAgentId: mocks.setSelectedAgentId,
+    },
+    chatInputManager: {
+      applyPromptSuggestion: mocks.applyPromptSuggestion,
+      setPendingProjectRoot: mocks.setPendingProjectRoot,
+      setPendingSessionType: mocks.setPendingSessionType,
+    },
+  }),
+}));
+
+vi.mock("@/shared/hooks/use-agents", () => ({
+  useAgents: () => ({
+    data: { agents: mocks.agents },
+  }),
+}));
+
+function createFetchedQuery<TData>(data: TData) {
+  return {
+    data,
+    error: null,
+    fetchStatus: "idle",
+    isFetched: true,
+    isFetching: false,
+    isLoading: false,
+    isSuccess: true,
+    status: "success",
+  };
+}
+
+function resetWelcomeTestState() {
+  mocks.setSelectedAgentId.mockReset();
+  mocks.applyPromptSuggestion.mockReset();
+  mocks.setPendingProjectRoot.mockReset();
+  mocks.setPendingSessionType.mockReset();
+  useChatInputStore.setState({
+    snapshot: {
+      ...useChatInputStore.getState().snapshot,
+      defaultSessionType: "native",
+      pendingSessionType: "native",
+      selectedSessionType: undefined,
+      pendingProjectRoot: null,
+    },
+  });
+  useChatSessionListStore.setState({
+    snapshot: {
+      ...useChatSessionListStore.getState().snapshot,
+      selectedAgentId: "main",
+    },
+  });
+  useChatThreadStore.setState({
+    snapshot: {
+      ...useChatThreadStore.getState().snapshot,
+      agentId: null,
+    },
+  });
+  useChatQueryStore.setState({
+    snapshot: {
+      configQuery: createFetchedQuery({
+        agents: {
+          defaults: {
+            workspace: "/Users/demo/.nextclaw/workspace",
+          },
+        },
+        providers: {},
+      }) as unknown as ChatQuerySnapshot["configQuery"],
+      sessionTypesQuery: createFetchedQuery({
+        defaultType: "native",
+        options: [
+          { value: "native", label: "Native", ready: true },
+          { value: "codex", label: "Codex", ready: true },
+        ],
+      }) as unknown as ChatQuerySnapshot["sessionTypesQuery"],
+      sessionsQuery: createFetchedQuery({
+        sessions: [],
+        total: 0,
+      }) as unknown as ChatQuerySnapshot["sessionsQuery"],
+    },
+  });
+}
+
+describe("ChatConversationWelcome", () => {
+  beforeEach(resetWelcomeTestState);
+
+  it("stores the selected welcome project through the input manager", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "select draft project" }),
+    );
+
+    expect(mocks.setPendingProjectRoot).toHaveBeenCalledWith("/tmp/project-alpha");
+  });
+
+  it("applies a selected prompt suggestion through the input manager", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "pick prompt" }),
+    );
+
+    expect(mocks.applyPromptSuggestion).toHaveBeenCalledWith("example prompt");
+  });
+
+
+  it("syncs the pending session type when switching the draft agent", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "switch draft agent" }),
+    );
+
+    expect(mocks.setSelectedAgentId).toHaveBeenCalledWith("engineer");
+    expect(mocks.setPendingSessionType).toHaveBeenCalledWith("codex");
+  });
+
+  it("stores an explicit welcome session type selection", async () => {
+    const user = userEvent.setup();
+
+    render(<ChatConversationWelcome inputSlot={<div data-testid="input-slot" />} />);
+
+    await user.click(
+      screen.getByRole("button", { name: "switch session type" }),
+    );
+
+    expect(mocks.setPendingSessionType).toHaveBeenCalledWith("codex");
+  });
+});