npm - @nextclaw/ui - Versions diffs - 0.11.12 → 0.11.14 - Mend

@nextclaw/ui 0.11.12 → 0.11.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/index-LhlkB00c.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-BEQcLDx6.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-Bro-iRcb.css">
+  <script type="module" crossorigin src="/assets/index-BvCYcN48.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-MCpnpiKt.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-CfVmBgkf.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.11.12",
+  "version": "0.11.14",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -29,10 +29,10 @@
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
     "@nextclaw/agent-chat": "0.1.4",
-    "@nextclaw/ncp": "0.4.1",
     "@nextclaw/agent-chat-ui": "0.2.14",
-    "@nextclaw/ncp-http-agent-client": "0.3.5",
-    "@nextclaw/ncp-react": "0.4.4"
+    "@nextclaw/ncp": "0.4.1",
+    "@nextclaw/ncp-react": "0.4.5",
+    "@nextclaw/ncp-http-agent-client": "0.3.5"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/components/chat/adapters/chat-input-bar.adapter.test.ts CHANGED Viewed

@@ -95,17 +95,123 @@ describe('buildModelToolbarSelect', () => {
           providerLabel: 'MiniMax'
         }
       ],
+      recentModelValues: [],
       selectedModel: 'dashscope/qwen3-coder-next',
       isModelOptionsLoading: false,
       hasModelOptions: true,
       onValueChange,
       texts: {
         modelSelectPlaceholder: 'Select model',
-        modelNoOptionsLabel: 'No models'
+        modelNoOptionsLabel: 'No models',
+        recentModelsLabel: 'Recent',
+        allModelsLabel: 'All models'
       }
     });
     expect(select.value).toBe('minimax/MiniMax-M2.7');
     expect(select.selectedLabel).toBe('MiniMax/MiniMax-M2.7');
+    expect(select.options[0]).toEqual({
+      value: 'minimax/MiniMax-M2.7',
+      label: 'MiniMax/MiniMax-M2.7'
+    });
+  });
+  it('groups recent models ahead of the remaining catalog', () => {
+    const select = buildModelToolbarSelect({
+      modelOptions: [
+        {
+          value: 'openai/gpt-5',
+          modelLabel: 'gpt-5',
+          providerLabel: 'OpenAI'
+        },
+        {
+          value: 'anthropic/claude-sonnet-4',
+          modelLabel: 'claude-sonnet-4',
+          providerLabel: 'Anthropic'
+        },
+        {
+          value: 'minimax/MiniMax-M2.7',
+          modelLabel: 'MiniMax-M2.7',
+          providerLabel: 'MiniMax'
+        }
+      ],
+      recentModelValues: ['anthropic/claude-sonnet-4', 'missing/model'],
+      selectedModel: 'openai/gpt-5',
+      isModelOptionsLoading: false,
+      hasModelOptions: true,
+      onValueChange: vi.fn(),
+      texts: {
+        modelSelectPlaceholder: 'Select model',
+        modelNoOptionsLabel: 'No models',
+        recentModelsLabel: 'Recent',
+        allModelsLabel: 'All models'
+      }
+    });
+    expect(select.groups).toEqual([
+      {
+        key: 'recent-models',
+        label: 'Recent',
+        options: [
+          {
+            value: 'anthropic/claude-sonnet-4',
+            label: 'Anthropic/claude-sonnet-4'
+          }
+        ]
+      },
+      {
+        key: 'all-models',
+        label: 'All models',
+        options: [
+          {
+            value: 'openai/gpt-5',
+            label: 'OpenAI/gpt-5'
+          },
+          {
+            value: 'minimax/MiniMax-M2.7',
+            label: 'MiniMax/MiniMax-M2.7'
+          }
+        ]
+      }
+    ]);
+  });
+  it('preserves recent model order from newest to oldest', () => {
+    const select = buildModelToolbarSelect({
+      modelOptions: [
+        {
+          value: 'openai/gpt-5',
+          modelLabel: 'gpt-5',
+          providerLabel: 'OpenAI'
+        },
+        {
+          value: 'anthropic/claude-sonnet-4',
+          modelLabel: 'claude-sonnet-4',
+          providerLabel: 'Anthropic'
+        },
+        {
+          value: 'deepseek/deepseek-chat',
+          modelLabel: 'deepseek-chat',
+          providerLabel: 'DeepSeek'
+        }
+      ],
+      recentModelValues: ['deepseek/deepseek-chat', 'openai/gpt-5', 'anthropic/claude-sonnet-4'],
+      selectedModel: 'openai/gpt-5',
+      isModelOptionsLoading: false,
+      hasModelOptions: true,
+      onValueChange: vi.fn(),
+      texts: {
+        modelSelectPlaceholder: 'Select model',
+        modelNoOptionsLabel: 'No models',
+        recentModelsLabel: 'Recent',
+        allModelsLabel: 'All models'
+      }
+    });
+    expect(select.groups?.[0]?.options.map((option) => option.value)).toEqual([
+      'deepseek/deepseek-chat',
+      'openai/gpt-5',
+      'anthropic/claude-sonnet-4'
+    ]);
   });
 });

package/src/components/chat/adapters/chat-input-bar.adapter.ts CHANGED Viewed

@@ -46,12 +46,20 @@ export type ChatInputBarAdapterTexts = {
   noSkillDescription: string;
   modelSelectPlaceholder: string;
   modelNoOptionsLabel: string;
+  recentModelsLabel: string;
+  allModelsLabel: string;
   sessionTypePlaceholder: string;
   thinkingLabels: Record<ChatThinkingLevel, string>;
   noModelOptionsLabel: string;
   configureProviderLabel: string;
 };
+function formatModelOptionLabel(option: ChatModelRecord): string {
+  const modelLabel = option.modelLabel.trim();
+  const providerLabel = option.providerLabel.trim();
+  return providerLabel ? `${providerLabel}/${modelLabel}` : modelLabel;
+}
 export function resolveSlashQuery(draft: string): string | null {
   const match = /^\/([^\s]*)$/.exec(draft);
   if (!match) {
@@ -231,30 +239,56 @@ export function buildModelStateHint(params: {
 export function buildModelToolbarSelect(params: {
   modelOptions: ChatModelRecord[];
+  recentModelValues?: string[];
   selectedModel: string;
   isModelOptionsLoading: boolean;
   hasModelOptions: boolean;
   onValueChange: (value: string) => void;
-  texts: Pick<ChatInputBarAdapterTexts, 'modelSelectPlaceholder' | 'modelNoOptionsLabel'>;
+  texts: Pick<ChatInputBarAdapterTexts, 'modelSelectPlaceholder' | 'modelNoOptionsLabel' | 'recentModelsLabel' | 'allModelsLabel'>;
 }): ChatToolbarSelect {
   const selectedModelOption = params.modelOptions.find((option) => option.value === params.selectedModel);
   const fallbackModelOption = params.modelOptions[0];
   const resolvedModelOption = selectedModelOption ?? fallbackModelOption;
   const resolvedValue = params.hasModelOptions ? resolvedModelOption?.value : undefined;
+  const recentValueSet = new Set(params.recentModelValues ?? []);
+  const modelOptionMap = new Map(params.modelOptions.map((option) => [option.value, option] as const));
+  const recentOptions = (params.recentModelValues ?? [])
+    .map((value) => modelOptionMap.get(value))
+    .filter((option): option is ChatModelRecord => Boolean(option));
+  const remainingOptions = params.modelOptions.filter((option) => !recentValueSet.has(option.value));
+  const optionGroups =
+    recentOptions.length > 0
+      ? [
+          {
+            key: 'recent-models',
+            label: params.texts.recentModelsLabel,
+            options: recentOptions.map((option) => ({
+              value: option.value,
+              label: formatModelOptionLabel(option)
+            }))
+          },
+          {
+            key: 'all-models',
+            label: params.texts.allModelsLabel,
+            options: remainingOptions.map((option) => ({
+              value: option.value,
+              label: formatModelOptionLabel(option)
+            }))
+          }
+        ].filter((group) => group.options.length > 0)
+      : undefined;
   return {
     key: 'model',
     value: resolvedValue,
     placeholder: params.texts.modelSelectPlaceholder,
-    selectedLabel: resolvedModelOption
-      ? `${resolvedModelOption.providerLabel}/${resolvedModelOption.modelLabel}`
-      : undefined,
+    selectedLabel: resolvedModelOption ? formatModelOptionLabel(resolvedModelOption) : undefined,
     icon: 'sparkles',
     options: params.modelOptions.map((option) => ({
       value: option.value,
-      label: option.modelLabel,
-      description: option.providerLabel
+      label: formatModelOptionLabel(option)
     })),
+    groups: optionGroups,
     disabled: !params.hasModelOptions,
     loading: params.isModelOptionsLoading,
     emptyLabel: params.texts.modelNoOptionsLabel,

package/src/components/chat/chat-recent-models.manager.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { RecentSelectionManager } from '@/lib/recent-selection.manager';
+export const chatRecentModelsManager = new RecentSelectionManager({
+  storageKey: 'nextclaw.chat.recent-models',
+  limit: 3
+});
+export const CHAT_RECENT_MODELS_MIN_OPTIONS = 5;

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

@@ -16,6 +16,10 @@ import {
   type ChatThinkingLevel
 } from '@/components/chat/adapters/chat-input-bar.adapter';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
+import {
+  CHAT_RECENT_MODELS_MIN_OPTIONS,
+  chatRecentModelsManager
+} from '@/components/chat/chat-recent-models.manager';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { t } from '@/lib/i18n';
@@ -104,6 +108,10 @@ export function ChatInputBarContainer() {
     [snapshot.skillRecords, officialSkillBadgeLabel]
   );
   const modelRecords = useMemo(() => toModelRecords(snapshot.modelOptions), [snapshot.modelOptions]);
+  const recentModelValues = chatRecentModelsManager.resolveVisible({
+    availableValues: modelRecords.map((option) => option.value),
+    minAvailableCount: CHAT_RECENT_MODELS_MIN_OPTIONS
+  });
   const hasModelOptions = modelRecords.length > 0;
   const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
@@ -116,6 +124,8 @@ export function ChatInputBarContainer() {
     : hasModelOptions
       ? t('chatInputPlaceholder')
       : t('chatModelNoOptions');
+  const recentModelsLabel = language === 'zh' ? '最近选择' : 'Recent';
+  const allModelsLabel = language === 'zh' ? '全部模型' : 'All models';
   const slashItems = useMemo(
     () => buildChatSlashItems(skillRecords, slashQuery ?? '', slashTexts),
@@ -171,13 +181,16 @@ export function ChatInputBarContainer() {
   const toolbarSelects = [
     buildModelToolbarSelect({
       modelOptions: modelRecords,
+      recentModelValues,
       selectedModel: snapshot.selectedModel,
       isModelOptionsLoading,
       hasModelOptions,
       onValueChange: presenter.chatInputManager.selectModel,
       texts: {
         modelSelectPlaceholder: t('chatSelectModel'),
-        modelNoOptionsLabel: t('chatModelNoOptions')
+        modelNoOptionsLabel: t('chatModelNoOptions'),
+        recentModelsLabel,
+        allModelsLabel
       }
     }),
     buildThinkingToolbarSelect({

package/src/components/chat/ncp/NcpChatPage.tsx CHANGED Viewed

@@ -22,6 +22,8 @@ import { useChatSessionListStore } from '@/components/chat/stores/chat-session-l
 import { resolveSessionTypeLabel } from '@/components/chat/useChatSessionTypeState';
 import { useConfirmDialog } from '@/hooks/useConfirmDialog';
 import { normalizeRequestedSkills } from '@/lib/chat-runtime-utils';
+import { appClient } from '@/transport';
+import { resolveNcpChatRealtimeReloadAction } from '@/components/chat/ncp/ncp-chat-realtime-reload';
 function buildNcpSendMetadata(payload: {
   model?: string;
@@ -69,6 +71,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
   const { sessionId: routeSessionIdParam } = useParams<{ sessionId?: string }>();
   const threadRef = useRef<HTMLDivElement | null>(null);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
+  const pendingRealtimeReloadRef = useRef(false);
   const routeSessionKey = useMemo(
     () => parseSessionKeyFromRoute(routeSessionIdParam),
     [routeSessionIdParam]
@@ -154,6 +157,50 @@ export function NcpChatPage({ view }: ChatPageProps) {
   const stopDisabledReason = agent.isRunning ? null : '__preparing__';
   const lastSendError = agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  useEffect(() => {
+    const flushRealtimeReload = () => {
+      const action = resolveNcpChatRealtimeReloadAction({
+        isHydrating: agent.isHydrating,
+        isRunning: agent.isRunning,
+        isSending: agent.isSending,
+      });
+      if (action === 'defer') {
+        pendingRealtimeReloadRef.current = true;
+        return;
+      }
+      if (action === 'skip') {
+        pendingRealtimeReloadRef.current = false;
+        return;
+      }
+      pendingRealtimeReloadRef.current = false;
+      void agent.reloadSeed();
+    };
+    return appClient.subscribe((event) => {
+      if (event.type === 'session.summary.upsert') {
+        if (event.payload.summary.sessionId !== activeSessionId) {
+          return;
+        }
+        flushRealtimeReload();
+        return;
+      }
+      if (event.type === 'session.updated' && event.payload.sessionKey === activeSessionId) {
+        flushRealtimeReload();
+      }
+    });
+  }, [activeSessionId, agent.isHydrating, agent.isRunning, agent.isSending, agent.reloadSeed]);
+  useEffect(() => {
+    if (!pendingRealtimeReloadRef.current) {
+      return;
+    }
+    if (agent.isHydrating || agent.isRunning || agent.isSending) {
+      return;
+    }
+    pendingRealtimeReloadRef.current = false;
+    void agent.reloadSeed();
+  }, [agent.isHydrating, agent.isRunning, agent.isSending, agent.reloadSeed]);
   useEffect(() => {
     presenter.chatStreamActionsManager.bind({
       sendMessage: async (payload) => {

package/src/components/chat/ncp/ncp-chat-input.manager.ts CHANGED Viewed

@@ -19,6 +19,7 @@ import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.stor
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
 import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
 import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
+import { chatRecentModelsManager } from '@/components/chat/chat-recent-models.manager';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { normalizeSessionType } from '@/components/chat/useChatSessionTypeState';
@@ -242,6 +243,7 @@ export class NcpChatInputManager {
   selectModel = (value: string) => {
     this.setSelectedModel(value);
+    chatRecentModelsManager.remember(value);
     this.sessionPreferenceSync.syncSelectedSessionPreferences();
   };

package/src/components/chat/ncp/ncp-chat-realtime-reload.test.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { resolveNcpChatRealtimeReloadAction } from '@/components/chat/ncp/ncp-chat-realtime-reload';
+describe('resolveNcpChatRealtimeReloadAction', () => {
+  it('defers reload while the page is hydrating', () => {
+    expect(
+      resolveNcpChatRealtimeReloadAction({
+        isHydrating: true,
+        isRunning: false,
+        isSending: false,
+      }),
+    ).toBe('defer');
+  });
+  it('skips reload while the current session run is still active', () => {
+    expect(
+      resolveNcpChatRealtimeReloadAction({
+        isHydrating: false,
+        isRunning: true,
+        isSending: false,
+      }),
+    ).toBe('skip');
+  });
+  it('skips reload while the current page is still sending', () => {
+    expect(
+      resolveNcpChatRealtimeReloadAction({
+        isHydrating: false,
+        isRunning: false,
+        isSending: true,
+      }),
+    ).toBe('skip');
+  });
+  it('reloads immediately once the current page is idle', () => {
+    expect(
+      resolveNcpChatRealtimeReloadAction({
+        isHydrating: false,
+        isRunning: false,
+        isSending: false,
+      }),
+    ).toBe('reload');
+  });
+});

package/src/components/chat/ncp/ncp-chat-realtime-reload.ts ADDED Viewed

@@ -0,0 +1,20 @@
+export type NcpChatRealtimeReloadAction = "reload" | "defer" | "skip";
+export function resolveNcpChatRealtimeReloadAction(params: {
+  isHydrating: boolean;
+  isRunning: boolean;
+  isSending: boolean;
+}): NcpChatRealtimeReloadAction {
+  if (params.isHydrating) {
+    return "defer";
+  }
+  // While the current page owns the active run, live stream events already
+  // update the conversation state. Rehydrating from realtime session summaries
+  // here can reintroduce transient "running" state after the run has ended.
+  if (params.isRunning || params.isSending) {
+    return "skip";
+  }
+  return "reload";
+}

package/src/lib/recent-selection.manager.test.ts ADDED Viewed

@@ -0,0 +1,68 @@
+import { RecentSelectionManager } from '@/lib/recent-selection.manager';
+describe('RecentSelectionManager', () => {
+  const storageKey = 'test.recent-selection-manager';
+  let storageState: Record<string, string>;
+  let storage: Pick<Storage, 'getItem' | 'setItem'>;
+  beforeEach(() => {
+    storageState = {};
+    storage = {
+      getItem: (key) => storageState[key] ?? null,
+      setItem: (key, value) => {
+        storageState[key] = value;
+      }
+    };
+  });
+  it('stores recent values in LRU order and respects the size limit', () => {
+    const manager = new RecentSelectionManager({ storageKey, limit: 3, storage });
+    manager.remember('openai/gpt-5');
+    manager.remember('anthropic/claude-sonnet-4');
+    manager.remember('minimax/MiniMax-M2.7');
+    manager.remember('openai/gpt-5');
+    expect(manager.read()).toEqual([
+      'openai/gpt-5',
+      'minimax/MiniMax-M2.7',
+      'anthropic/claude-sonnet-4'
+    ]);
+  });
+  it('filters recent values by the currently available list and threshold', () => {
+    const manager = new RecentSelectionManager({ storageKey, limit: 4, storage });
+    manager.remember('openai/gpt-5');
+    manager.remember('anthropic/claude-sonnet-4');
+    manager.remember('missing/model');
+    expect(
+      manager.resolveVisible({
+        availableValues: [
+          'openai/gpt-5',
+          'anthropic/claude-sonnet-4',
+          'minimax/MiniMax-M2.7',
+          'deepseek/deepseek-chat',
+          'openrouter/openai/gpt-4.1',
+          'gemini/gemini-2.5-pro'
+        ],
+        minAvailableCount: 5,
+        limit: 2
+      })
+    ).toEqual(['anthropic/claude-sonnet-4', 'openai/gpt-5']);
+    expect(
+      manager.resolveVisible({
+        availableValues: ['openai/gpt-5', 'anthropic/claude-sonnet-4', 'minimax/MiniMax-M2.7'],
+        minAvailableCount: 5
+      })
+    ).toEqual([]);
+  });
+  it('returns an empty list when storage content is malformed', () => {
+    storageState[storageKey] = '{broken-json';
+    const manager = new RecentSelectionManager({ storageKey, limit: 3, storage });
+    expect(manager.read()).toEqual([]);
+  });
+});

package/src/lib/recent-selection.manager.ts ADDED Viewed

@@ -0,0 +1,105 @@
+type RecentSelectionManagerOptions = {
+  storageKey: string;
+  limit: number;
+  storage?: Pick<Storage, 'getItem' | 'setItem'> | null;
+};
+type VisibleRecentSelectionParams = {
+  availableValues: string[];
+  minAvailableCount: number;
+  limit?: number;
+};
+export class RecentSelectionManager {
+  constructor(private readonly options: RecentSelectionManagerOptions) {}
+  read(): string[] {
+    const storage = this.getStorage();
+    if (!storage) {
+      return [];
+    }
+    try {
+      return this.normalizeList(JSON.parse(storage.getItem(this.options.storageKey) ?? '[]'));
+    } catch {
+      return [];
+    }
+  }
+  remember(value: string): string[] {
+    const normalizedValue = this.normalizeValue(value);
+    if (!normalizedValue) {
+      return this.read();
+    }
+    const next = [normalizedValue, ...this.read().filter((item) => item !== normalizedValue)].slice(0, this.options.limit);
+    this.write(next);
+    return next;
+  }
+  resolveVisible(params: VisibleRecentSelectionParams): string[] {
+    const availableValues = this.normalizeList(params.availableValues, Number.POSITIVE_INFINITY);
+    if (availableValues.length <= params.minAvailableCount) {
+      return [];
+    }
+    const availableSet = new Set(availableValues);
+    const visible: string[] = [];
+    const maxVisibleItems = Math.max(1, params.limit ?? this.options.limit);
+    for (const value of this.read()) {
+      if (!availableSet.has(value) || visible.includes(value)) {
+        continue;
+      }
+      visible.push(value);
+      if (visible.length >= maxVisibleItems) {
+        break;
+      }
+    }
+    return visible;
+  }
+  private write(values: string[]): void {
+    const storage = this.getStorage();
+    if (!storage) {
+      return;
+    }
+    try {
+      storage.setItem(this.options.storageKey, JSON.stringify(this.normalizeList(values)));
+    } catch {
+      // Ignore storage write failures and keep the runtime behavior deterministic.
+    }
+  }
+  private getStorage(): Storage | null {
+    if (Object.prototype.hasOwnProperty.call(this.options, 'storage')) {
+      return (this.options.storage as Storage | null | undefined) ?? null;
+    }
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    return window.localStorage;
+  }
+  private normalizeList(values: unknown, limit = this.options.limit): string[] {
+    if (!Array.isArray(values)) {
+      return [];
+    }
+    const deduped: string[] = [];
+    for (const value of values) {
+      const normalized = this.normalizeValue(value);
+      if (!normalized || deduped.includes(normalized)) {
+        continue;
+      }
+      deduped.push(normalized);
+      if (deduped.length >= limit) {
+        break;
+      }
+    }
+    return deduped;
+  }
+  private normalizeValue(value: unknown): string | null {
+    if (typeof value !== 'string') {
+      return null;
+    }
+    const normalized = value.trim();
+    return normalized.length > 0 ? normalized : null;
+  }
+}