@nextclaw/ui 0.14.1-beta.1 → 0.14.2

package/src/features/chat/features/session/hooks/__tests__/use-chat-session-project.test.tsx

@@ -1,7 +1,6 @@
 import { act, renderHook } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { toast } from 'sonner';
-import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { useChatSessionProject } from '@/features/chat/features/session/hooks/use-chat-session-project';
 
 const mocks = vi.hoisted(() => ({
@@ -19,21 +18,11 @@ vi.mock('@/features/chat/features/session/hooks/use-chat-session-update', () =>
 }));
 
 describe('useChatSessionProject', () => {
-  beforeEach(() => {
-    useChatInputStore.setState((state) => ({
-      snapshot: {
-        ...state.snapshot,
-        pendingProjectRoot: null,
-        pendingProjectRootSessionKey: null
-      }
-    }));
-  });
-
   afterEach(() => {
     vi.clearAllMocks();
   });
 
-  it('stores the draft project root locally when the session does not exist yet', async () => {
+  it('does not persist draft project root through the session update hook', async () => {
     const { result } = renderHook(() => useChatSessionProject());
 
     await act(async () => {
@@ -45,14 +34,10 @@ describe('useChatSessionProject', () => {
     });
 
     expect(mocks.updateSession).not.toHaveBeenCalled();
-    expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: '/tmp/project-alpha',
-      pendingProjectRootSessionKey: 'draft-session-1'
-    });
     expect(toast.success).toHaveBeenCalledTimes(1);
   });
 
-  it('keeps an explicit draft override when clearing the project root locally', async () => {
+  it('does not persist draft project clearing through the session update hook', async () => {
     const { result } = renderHook(() => useChatSessionProject());
 
     await act(async () => {
@@ -64,10 +49,6 @@ describe('useChatSessionProject', () => {
     });
 
     expect(mocks.updateSession).not.toHaveBeenCalled();
-    expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: null,
-      pendingProjectRootSessionKey: 'draft-session-1'
-    });
     expect(toast.success).toHaveBeenCalledTimes(1);
   });
 
@@ -87,10 +68,6 @@ describe('useChatSessionProject', () => {
       patch: { projectRoot: '/tmp/project-beta' },
       successMessage: 'Project directory updated'
     });
-    expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: null,
-      pendingProjectRootSessionKey: null
-    });
   });
 
   it('persists clearing to the server without keeping a session-scoped local override', async () => {
@@ -109,9 +86,5 @@ describe('useChatSessionProject', () => {
       patch: { projectRoot: null },
       successMessage: 'Project directory cleared'
     });
-    expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: null,
-      pendingProjectRootSessionKey: null
-    });
   });
 });

package/src/features/chat/features/session/hooks/use-chat-session-project.ts

@@ -1,6 +1,5 @@
 import { toast } from 'sonner';
 import { t } from '@/shared/lib/i18n';
-import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { useChatSessionUpdate } from '@/features/chat/features/session/hooks/use-chat-session-update';
 
 type UpdateChatSessionProjectParams = {
@@ -17,10 +16,6 @@ export function useChatSessionProject() {
     const successMessage = projectRoot ? t('chatSessionProjectUpdated') : t('chatSessionProjectCleared');
 
     if (!persistToServer) {
-      useChatInputStore.getState().setSnapshot({
-        pendingProjectRoot: projectRoot,
-        pendingProjectRootSessionKey: sessionKey
-      });
       toast.success(successMessage);
       return;
     }

package/src/features/chat/features/session/utils/chat-run-metadata.utils.ts

@@ -1,3 +1,7 @@
+import {
+  CHAT_SESSION_MATERIALIZATION_METADATA_KEY,
+  type AgentRunSessionMaterializationMetadata,
+} from "@nextclaw/shared";
 import { buildInlineSkillTokensFromComposer, CHAT_UI_INLINE_TOKENS_METADATA_KEY } from "@/features/chat/features/input/utils/chat-inline-token.utils";
 import { normalizeRequestedSkills } from "@/features/chat/features/runtime/utils/chat-runtime.utils";
 import { normalizeSessionProjectRootValue } from "@/shared/lib/session-project";
@@ -17,6 +21,7 @@ export function buildChatRunMetadata(payload: {
   projectRoot?: string | null;
   requestedSkills?: string[];
   composerNodes?: Parameters<typeof buildInlineSkillTokensFromComposer>[0];
+  sessionMaterialization?: AgentRunSessionMaterializationMetadata | null;
 }): Record<string, unknown> {
   const projectRoot = normalizeSessionProjectRootValue(payload.projectRoot);
   const metadata: Record<string, unknown> = {
@@ -36,6 +41,9 @@ export function buildChatRunMetadata(payload: {
   if (inlineSkillTokens.length > 0) {
     metadata[CHAT_UI_INLINE_TOKENS_METADATA_KEY] = inlineSkillTokens;
   }
+  if (payload.sessionMaterialization) {
+    metadata[CHAT_SESSION_MATERIALIZATION_METADATA_KEY] = payload.sessionMaterialization;
+  }
   return metadata;
 }
 

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

@@ -1,16 +1,16 @@
 import { render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
-import { ChatSidebarCreateMenu } from "@/features/chat/features/session-type/components/chat-sidebar-create-menu";
+import { ChatSessionTypeMenu } from "@/features/chat/features/session-type/components/chat-session-type-menu";
 import { createPopoverAvailableHeightLimit } from "@/shared/components/ui/popover";
 
 const options = [
-  { value: "native", label: "Native", ready: true },
-  { value: "codex", label: "Codex", ready: true },
+  { value: "native", label: "Native", icon: null, ready: true },
+  { value: "codex", label: "Codex", icon: null, ready: true },
 ];
 
-describe("ChatSidebarCreateMenu", () => {
+describe("ChatSessionTypeMenu", () => {
   it("keeps the session type menu height bounded", () => {
-    render(<ChatSidebarCreateMenu options={options} onSelect={vi.fn()} />);
+    render(<ChatSessionTypeMenu options={options} onSelect={vi.fn()} />);
 
     const createMenu = screen.getByText("Session Type").parentElement;
     expect(createMenu?.style.maxHeight).toBe(

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";
 
@@ -50,6 +50,7 @@ describe("ChatSessionTypeOptionItem", () => {
         option={{
           value: "native",
           label: "Native",
+          icon: null,
           ready: true,
         }}
         onSelect={vi.fn()}
@@ -59,4 +60,31 @@ 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",
+          icon: null,
+          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,35 +1,37 @@
 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 type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 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_SIDEBAR_CREATE_MENU_MAX_HEIGHT =
+type SessionTypeOption = ChatSessionTypeOption;
+const CHAT_SESSION_TYPE_MENU_MAX_HEIGHT =
   createPopoverAvailableHeightLimit("18rem");
-const CHAT_SIDEBAR_CREATE_MENU_STYLE = {
-  maxHeight: CHAT_SIDEBAR_CREATE_MENU_MAX_HEIGHT,
+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 overflow-y-auto overscroll-contain", className)}
-      style={CHAT_SIDEBAR_CREATE_MENU_STYLE}
+      style={CHAT_SESSION_TYPE_MENU_STYLE}
     >
       <div
         className={cn(
@@ -42,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

@@ -1,16 +1,19 @@
-import type { ChatInputSnapshot } from "@/features/chat/stores/chat-input.store";
 import { SessionContextIconNode } from "@/features/chat/features/session/components/session-context-icon";
+import type { ChatSessionTypeOption } from "@/features/chat/features/session-type/utils/chat-session-type.utils";
 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];
+type SessionTypeOption = ChatSessionTypeOption;
 
 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,
+  };
+}