@nextclaw/ui 0.8.0 → 0.9.1

package/src/components/chat/chat-page-runtime.test.ts

@@ -0,0 +1,181 @@
+import { describe, expect, it } from 'vitest';
+import type { SessionEntryView } from '@/api/types';
+import { resolveRecentSessionPreferredModel, resolveSelectedModelValue } from '@/components/chat/chat-page-runtime';
+
+const modelOptions = [
+  {
+    value: 'anthropic/claude-sonnet-4',
+    modelLabel: 'claude-sonnet-4',
+    providerLabel: 'Anthropic',
+    thinkingCapability: null
+  },
+  {
+    value: 'openai/gpt-5',
+    modelLabel: 'gpt-5',
+    providerLabel: 'OpenAI',
+    thinkingCapability: null
+  }
+];
+
+function createSession(overrides: Partial<SessionEntryView> & Pick<SessionEntryView, 'key'>): SessionEntryView {
+  return {
+    key: overrides.key,
+    createdAt: overrides.createdAt ?? '2026-03-19T00:00:00.000Z',
+    updatedAt: overrides.updatedAt ?? '2026-03-19T00:00:00.000Z',
+    sessionType: overrides.sessionType ?? 'native',
+    sessionTypeMutable: overrides.sessionTypeMutable ?? false,
+    messageCount: overrides.messageCount ?? 0,
+    ...(overrides.label ? { label: overrides.label } : {}),
+    ...(overrides.preferredModel ? { preferredModel: overrides.preferredModel } : {}),
+    ...(overrides.lastRole ? { lastRole: overrides.lastRole } : {}),
+    ...(overrides.lastTimestamp ? { lastTimestamp: overrides.lastTimestamp } : {})
+  };
+}
+
+describe('resolveSelectedModelValue', () => {
+  it('keeps the current selected model when it is still available', () => {
+    expect(
+      resolveSelectedModelValue({
+        currentSelectedModel: 'openai/gpt-5',
+        modelOptions,
+        selectedSessionPreferredModel: 'anthropic/claude-sonnet-4',
+        fallbackPreferredModel: 'anthropic/claude-sonnet-4',
+        defaultModel: 'anthropic/claude-sonnet-4'
+      })
+    ).toBe('openai/gpt-5');
+  });
+
+  it('prefers the current session preferred model over runtime fallback and global default', () => {
+    expect(
+      resolveSelectedModelValue({
+        currentSelectedModel: 'missing/model',
+        modelOptions,
+        selectedSessionPreferredModel: 'openai/gpt-5',
+        fallbackPreferredModel: 'anthropic/claude-sonnet-4',
+        defaultModel: 'anthropic/claude-sonnet-4'
+      })
+    ).toBe('openai/gpt-5');
+  });
+
+  it('prefers the current session preferred model over a stale in-memory selection after switching sessions', () => {
+    expect(
+      resolveSelectedModelValue({
+        currentSelectedModel: 'anthropic/claude-sonnet-4',
+        modelOptions,
+        selectedSessionPreferredModel: 'openai/gpt-5',
+        fallbackPreferredModel: 'anthropic/claude-sonnet-4',
+        defaultModel: 'anthropic/claude-sonnet-4',
+        preferSessionPreferredModel: true
+      })
+    ).toBe('openai/gpt-5');
+  });
+
+  it('ignores the stale in-memory selection when a switched session has no explicit preferred model', () => {
+    expect(
+      resolveSelectedModelValue({
+        currentSelectedModel: 'anthropic/claude-sonnet-4',
+        modelOptions,
+        fallbackPreferredModel: 'openai/gpt-5',
+        defaultModel: 'anthropic/claude-sonnet-4',
+        preferSessionPreferredModel: true
+      })
+    ).toBe('openai/gpt-5');
+  });
+
+  it('uses the recent same-runtime model when the current session has no valid preferred model', () => {
+    expect(
+      resolveSelectedModelValue({
+        currentSelectedModel: 'missing/model',
+        modelOptions,
+        fallbackPreferredModel: 'openai/gpt-5',
+        defaultModel: 'anthropic/claude-sonnet-4'
+      })
+    ).toBe('openai/gpt-5');
+  });
+
+  it('falls back to the global default model when the recent same-runtime model is unavailable', () => {
+    expect(
+      resolveSelectedModelValue({
+        currentSelectedModel: 'missing/model',
+        modelOptions,
+        fallbackPreferredModel: 'missing/model',
+        defaultModel: 'anthropic/claude-sonnet-4'
+      })
+    ).toBe('anthropic/claude-sonnet-4');
+  });
+
+  it('falls back to the first available model when no candidate is valid', () => {
+    expect(
+      resolveSelectedModelValue({
+        currentSelectedModel: 'missing/model',
+        modelOptions,
+        selectedSessionPreferredModel: 'missing/model',
+        fallbackPreferredModel: 'missing/model',
+        defaultModel: 'missing/model'
+      })
+    ).toBe('anthropic/claude-sonnet-4');
+  });
+});
+
+describe('resolveRecentSessionPreferredModel', () => {
+  it('returns the most recent preferred model from the same runtime', () => {
+    const sessions = [
+      createSession({
+        key: 'native-1',
+        sessionType: 'native',
+        preferredModel: 'anthropic/claude-sonnet-4',
+        updatedAt: '2026-03-18T01:00:00.000Z'
+      }),
+      createSession({
+        key: 'codex-1',
+        sessionType: 'codex',
+        preferredModel: 'openai/gpt-5',
+        updatedAt: '2026-03-18T03:00:00.000Z'
+      }),
+      createSession({
+        key: 'codex-2',
+        sessionType: 'codex',
+        preferredModel: 'anthropic/claude-sonnet-4',
+        updatedAt: '2026-03-18T02:00:00.000Z'
+      })
+    ];
+
+    expect(
+      resolveRecentSessionPreferredModel({
+        sessions,
+        selectedSessionKey: 'draft',
+        sessionType: 'codex'
+      })
+    ).toBe('openai/gpt-5');
+  });
+
+  it('ignores the currently selected session and sessions without preferred models', () => {
+    const sessions = [
+      createSession({
+        key: 'codex-current',
+        sessionType: 'codex',
+        preferredModel: 'openai/gpt-5',
+        updatedAt: '2026-03-18T03:00:00.000Z'
+      }),
+      createSession({
+        key: 'codex-empty',
+        sessionType: 'codex',
+        updatedAt: '2026-03-18T04:00:00.000Z'
+      }),
+      createSession({
+        key: 'codex-fallback',
+        sessionType: 'codex',
+        preferredModel: 'anthropic/claude-sonnet-4',
+        updatedAt: '2026-03-18T02:00:00.000Z'
+      })
+    ];
+
+    expect(
+      resolveRecentSessionPreferredModel({
+        sessions,
+        selectedSessionKey: 'codex-current',
+        sessionType: 'codex'
+      })
+    ).toBe('anthropic/claude-sonnet-4');
+  });
+});

package/src/components/chat/chat-page-runtime.ts

@@ -1,39 +1,125 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { ChatRunView } from '@/api/types';
+import type { ChatRunView, SessionEntryView } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { useChatRuns } from '@/hooks/useConfig';
 import { buildActiveRunBySessionKey, buildSessionRunStatusByKey } from '@/lib/session-run-status';
 
 export type ChatMainPanelView = 'chat' | 'cron' | 'skills';
 
+function normalizeSessionType(value: string | null | undefined): string {
+  const normalized = value?.trim().toLowerCase();
+  return normalized || 'native';
+}
+
+function hasModelOption(modelOptions: ChatModelOption[], value: string | null | undefined): value is string {
+  const normalized = value?.trim();
+  if (!normalized) {
+    return false;
+  }
+  return modelOptions.some((option) => option.value === normalized);
+}
+
+export function resolveSelectedModelValue(params: {
+  currentSelectedModel?: string;
+  modelOptions: ChatModelOption[];
+  selectedSessionPreferredModel?: string;
+  fallbackPreferredModel?: string;
+  defaultModel?: string;
+  preferSessionPreferredModel?: boolean;
+}): string {
+  const {
+    currentSelectedModel,
+    modelOptions,
+    selectedSessionPreferredModel,
+    fallbackPreferredModel,
+    defaultModel,
+    preferSessionPreferredModel = false
+  } = params;
+  if (modelOptions.length === 0) {
+    return '';
+  }
+  if (!preferSessionPreferredModel && hasModelOption(modelOptions, currentSelectedModel)) {
+    return currentSelectedModel.trim();
+  }
+  if (hasModelOption(modelOptions, selectedSessionPreferredModel)) {
+    return selectedSessionPreferredModel.trim();
+  }
+  if (hasModelOption(modelOptions, fallbackPreferredModel)) {
+    return fallbackPreferredModel.trim();
+  }
+  if (hasModelOption(modelOptions, defaultModel)) {
+    return defaultModel.trim();
+  }
+  return modelOptions[0]?.value ?? '';
+}
+
+export function resolveRecentSessionPreferredModel(params: {
+  sessions: readonly SessionEntryView[];
+  selectedSessionKey?: string | null;
+  sessionType?: string | null;
+}): string | undefined {
+  const targetSessionType = normalizeSessionType(params.sessionType);
+  let bestSession: SessionEntryView | null = null;
+  let bestTimestamp = Number.NEGATIVE_INFINITY;
+  for (const session of params.sessions) {
+    if (session.key === params.selectedSessionKey) {
+      continue;
+    }
+    if (normalizeSessionType(session.sessionType) !== targetSessionType) {
+      continue;
+    }
+    const preferredModel = session.preferredModel?.trim();
+    if (!preferredModel) {
+      continue;
+    }
+    const updatedAtTimestamp = Date.parse(session.updatedAt);
+    const comparableTimestamp = Number.isFinite(updatedAtTimestamp) ? updatedAtTimestamp : Number.NEGATIVE_INFINITY;
+    if (!bestSession || comparableTimestamp > bestTimestamp) {
+      bestSession = session;
+      bestTimestamp = comparableTimestamp;
+    }
+  }
+  return bestSession?.preferredModel?.trim();
+}
+
 export function useSyncSelectedModel(params: {
   modelOptions: ChatModelOption[];
+  selectedSessionKey?: string | null;
   selectedSessionPreferredModel?: string;
+  fallbackPreferredModel?: string;
   defaultModel?: string;
   setSelectedModel: Dispatch<SetStateAction<string>>;
 }) {
-  const { modelOptions, selectedSessionPreferredModel, defaultModel, setSelectedModel } = params;
+  const {
+    modelOptions,
+    selectedSessionKey,
+    selectedSessionPreferredModel,
+    fallbackPreferredModel,
+    defaultModel,
+    setSelectedModel
+  } = params;
+  const previousSessionKeyRef = useRef<string | null | undefined>(undefined);
+
   useEffect(() => {
+    const sessionChanged = previousSessionKeyRef.current !== selectedSessionKey;
     if (modelOptions.length === 0) {
       setSelectedModel('');
+      previousSessionKeyRef.current = selectedSessionKey;
       return;
     }
     setSelectedModel((prev) => {
-      if (modelOptions.some((option) => option.value === prev)) {
-        return prev;
-      }
-      const sessionPreferred = selectedSessionPreferredModel?.trim();
-      if (sessionPreferred && modelOptions.some((option) => option.value === sessionPreferred)) {
-        return sessionPreferred;
-      }
-      const fallback = defaultModel?.trim();
-      if (fallback && modelOptions.some((option) => option.value === fallback)) {
-        return fallback;
-      }
-      return modelOptions[0]?.value ?? '';
+      return resolveSelectedModelValue({
+        currentSelectedModel: prev,
+        modelOptions,
+        selectedSessionPreferredModel,
+        fallbackPreferredModel,
+        defaultModel,
+        preferSessionPreferredModel: sessionChanged
+      });
     });
-  }, [defaultModel, modelOptions, selectedSessionPreferredModel, setSelectedModel]);
+    previousSessionKeyRef.current = selectedSessionKey;
+  }, [defaultModel, fallbackPreferredModel, modelOptions, selectedSessionKey, selectedSessionPreferredModel, setSelectedModel]);
 }
 
 export function useSessionRunStatus(params: {

package/src/components/chat/chat-session-preference-sync.test.ts

@@ -0,0 +1,62 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { updateSession } from '@/api/config';
+import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+
+vi.mock('@/api/config', () => ({
+  updateSession: vi.fn(async () => ({
+    key: 'session-1',
+    totalMessages: 0,
+    totalEvents: 0,
+    sessionType: 'native',
+    sessionTypeMutable: false,
+    metadata: {},
+    messages: [],
+    events: []
+  }))
+}));
+
+describe('ChatSessionPreferenceSync', () => {
+  afterEach(() => {
+    useChatInputStore.setState((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        selectedModel: '',
+        selectedThinkingLevel: null
+      }
+    }));
+    useChatSessionListStore.setState((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        selectedSessionKey: null
+      }
+    }));
+    vi.clearAllMocks();
+  });
+
+  it('persists the selected model and thinking to the current session metadata', async () => {
+    useChatInputStore.setState((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        selectedModel: 'openai/gpt-5',
+        selectedThinkingLevel: 'high'
+      }
+    }));
+    useChatSessionListStore.setState((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        selectedSessionKey: 'session-1'
+      }
+    }));
+
+    const sync = new ChatSessionPreferenceSync(updateSession);
+    sync.syncSelectedSessionPreferences();
+    await vi.waitFor(() => {
+      expect(updateSession).toHaveBeenCalledWith('session-1', {
+        preferredModel: 'openai/gpt-5',
+        preferredThinking: 'high'
+      });
+    });
+  });
+});

package/src/components/chat/chat-session-preference-sync.ts

@@ -0,0 +1,75 @@
+import type { SessionPatchUpdate, ThinkingLevel } from '@/api/types';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+
+type QueuedSessionPreferenceSync = {
+  sessionKey: string;
+  patch: SessionPatchUpdate;
+};
+
+function normalizeOptionalModel(value: string): string | null {
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : null;
+}
+
+function normalizeOptionalThinking(value: ThinkingLevel | null): ThinkingLevel | null {
+  return value ?? null;
+}
+
+export class ChatSessionPreferenceSync {
+  private inFlight: Promise<void> | null = null;
+  private queued: QueuedSessionPreferenceSync | null = null;
+
+  constructor(
+    private readonly updateSession: (
+      sessionKey: string,
+      patch: SessionPatchUpdate
+    ) => Promise<unknown>
+  ) {}
+
+  syncSelectedSessionPreferences = (): void => {
+    const inputSnapshot = useChatInputStore.getState().snapshot;
+    const sessionSnapshot = useChatSessionListStore.getState().snapshot;
+    const sessionKey = sessionSnapshot.selectedSessionKey;
+    if (!sessionKey) {
+      return;
+    }
+
+    this.enqueue({
+      sessionKey,
+      patch: {
+        preferredModel: normalizeOptionalModel(inputSnapshot.selectedModel),
+        preferredThinking: normalizeOptionalThinking(inputSnapshot.selectedThinkingLevel)
+      }
+    });
+  };
+
+  private enqueue(next: QueuedSessionPreferenceSync): void {
+    this.queued = next;
+    if (this.inFlight) {
+      return;
+    }
+    this.startFlush();
+  }
+
+  private startFlush(): void {
+    this.inFlight = this.flush()
+      .catch((error) => {
+        console.error(`Failed to sync chat session preferences: ${String(error)}`);
+      })
+      .finally(() => {
+        this.inFlight = null;
+        if (this.queued) {
+          this.startFlush();
+        }
+      });
+  }
+
+  private async flush(): Promise<void> {
+    while (this.queued) {
+      const current = this.queued;
+      this.queued = null;
+      await this.updateSession(current.sessionKey, current.patch);
+    }
+  }
+}

package/src/components/chat/chat-stream/types.ts

@@ -1,3 +1,4 @@
+import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import type {
   ChatRunView,
@@ -20,6 +21,7 @@ export type SendMessageParams = {
   stopSupported?: boolean;
   stopReason?: string;
   restoreDraftOnError?: boolean;
+  composerNodes?: ChatComposerNode[];
 };
 
 export type ActiveRunState = {
@@ -65,6 +67,7 @@ export type UseChatStreamControllerParams = {
   selectedSessionKeyRef: MutableRefObject<string | null>;
   setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
   setDraft: Dispatch<SetStateAction<string>>;
+  setComposerNodes: Dispatch<SetStateAction<ChatComposerNode[]>>;
   refetchSessions: () => Promise<unknown>;
   refetchHistory: () => Promise<unknown>;
 };

package/src/components/chat/containers/chat-input-bar.container.tsx

@@ -1,19 +1,15 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { ChatInputBar } from '@nextclaw/agent-chat-ui';
 import {
   buildChatSlashItems,
   buildModelStateHint,
   buildModelToolbarSelect,
-  buildSelectedSkillItems,
-  buildSessionTypeToolbarSelect,
   buildSkillPickerModel,
   buildThinkingToolbarSelect,
-  resolveSlashQuery,
   type ChatModelRecord,
   type ChatSkillRecord,
   type ChatThinkingLevel
 } from '@/components/chat/adapters/chat-input-bar.adapter';
-import { useChatInputBarController } from '@/components/chat/chat-input/chat-input-bar.controller';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
@@ -73,6 +69,7 @@ export function ChatInputBarContainer() {
   const presenter = usePresenter();
   const { language } = useI18n();
   const snapshot = useChatInputStore((state) => state.snapshot);
+  const [slashQuery, setSlashQuery] = useState<string | null>(null);
 
   const officialSkillBadgeLabel = useMemo(() => {
     // Keep memo reactive to locale switches even though `t` is imported as a stable function.
@@ -111,41 +108,11 @@ export function ChatInputBarContainer() {
       ? t('chatInputPlaceholder')
       : t('chatModelNoOptions');
 
-  const slashQuery = resolveSlashQuery(snapshot.draft);
   const slashItems = useMemo(
     () => buildChatSlashItems(skillRecords, slashQuery ?? '', slashTexts),
     [slashQuery, skillRecords, slashTexts]
   );
 
-  const controller = useChatInputBarController({
-    isSlashMode: slashQuery !== null,
-    slashItems,
-    isSlashLoading: snapshot.isSkillsLoading,
-    onSelectSlashItem: (item) => {
-      if (!item.value) {
-        return;
-      }
-      if (!snapshot.selectedSkills.includes(item.value)) {
-        presenter.chatInputManager.selectSkills([...snapshot.selectedSkills, item.value]);
-      }
-      presenter.chatInputManager.setDraft('');
-    },
-    onSend: presenter.chatInputManager.send,
-    onStop: presenter.chatInputManager.stop,
-    isSending: snapshot.isSending,
-    canStopGeneration: snapshot.canStopGeneration
-  });
-
-  const selectedSessionTypeOption =
-    snapshot.sessionTypeOptions.find((option) => option.value === snapshot.selectedSessionType) ??
-    (snapshot.selectedSessionType
-      ? { value: snapshot.selectedSessionType, label: snapshot.selectedSessionType }
-      : null);
-  const shouldShowSessionTypeSelector =
-    snapshot.canEditSessionType &&
-    (snapshot.sessionTypeOptions.length > 1 ||
-      Boolean(snapshot.selectedSessionType && snapshot.selectedSessionType !== 'native'));
-
   const selectedModelOption = modelRecords.find((option) => option.value === snapshot.selectedModel);
   const selectedModelThinkingCapability = selectedModelOption?.thinkingCapability;
   const thinkingSupportedLevels = selectedModelThinkingCapability?.supported ?? [];
@@ -156,17 +123,6 @@ export function ChatInputBarContainer() {
       : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
 
   const toolbarSelects = [
-    buildSessionTypeToolbarSelect({
-      selectedSessionType: snapshot.selectedSessionType,
-      selectedSessionTypeOption,
-      sessionTypeOptions: snapshot.sessionTypeOptions,
-      onValueChange: presenter.chatInputManager.selectSessionType,
-      canEditSessionType: snapshot.canEditSessionType,
-      shouldShow: shouldShowSessionTypeSelector,
-      texts: {
-        sessionTypePlaceholder: t('chatSessionTypeLabel')
-      }
-    }),
     buildModelToolbarSelect({
       modelOptions: modelRecords,
       selectedModel: snapshot.selectedModel,
@@ -205,27 +161,23 @@ export function ChatInputBarContainer() {
 
   return (
     <ChatInputBar
-      value={snapshot.draft}
-      placeholder={textareaPlaceholder}
-      disabled={inputDisabled}
-      onValueChange={presenter.chatInputManager.setDraft}
-      onKeyDown={controller.onTextareaKeyDown}
+      composer={{
+        nodes: snapshot.composerNodes,
+        placeholder: textareaPlaceholder,
+        disabled: inputDisabled,
+        onNodesChange: presenter.chatInputManager.setComposerNodes,
+        onSlashQueryChange: setSlashQuery
+      }}
       slashMenu={{
-        isOpen: controller.isSlashPanelOpen,
         isLoading: snapshot.isSkillsLoading,
         items: slashItems,
-        activeIndex: controller.activeSlashIndex,
-        activeItem: controller.activeSlashItem,
         texts: {
           slashLoadingLabel: t('chatSlashLoading'),
           slashSectionLabel: t('chatSlashSectionSkills'),
           slashEmptyLabel: t('chatSlashNoResult'),
           slashHintLabel: t('chatSlashHint'),
           slashSkillHintLabel: t('chatSlashSkillHint')
-        },
-        onSelectItem: controller.onSelectSlashItem,
-        onOpenChange: controller.onSlashPanelOpenChange,
-        onSetActiveIndex: controller.onSetActiveSlashIndex
+        }
       }}
       hint={buildModelStateHint({
         isModelOptionsLoading,
@@ -236,17 +188,14 @@ export function ChatInputBarContainer() {
           configureProviderLabel: t('chatGoConfigureProvider')
         }
       })}
-      selectedItems={{
-        items: buildSelectedSkillItems(snapshot.selectedSkills, skillRecords),
-        onRemove: (key) => presenter.chatInputManager.selectSkills(snapshot.selectedSkills.filter((skill) => skill !== key))
-      }}
       toolbar={{
         selects: toolbarSelects,
         accessories: [
           {
             key: 'attach',
-            label: t('chatInputAttachComingSoon'),
+            label: t('chatInputAttach'),
             icon: 'paperclip',
+            iconOnly: true,
             disabled: true,
             tooltip: t('chatInputAttachComingSoon')
           }