npm - @nextclaw/ui - Versions diffs - 0.11.11 → 0.11.13 - Mend

@nextclaw/ui 0.11.11 → 0.11.13

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-BRfdTpro.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-BBz4mi7g.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.11",
+  "version": "0.11.13",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,11 +28,11 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat": "0.1.3",
-    "@nextclaw/ncp": "0.4.0",
-    "@nextclaw/ncp-http-agent-client": "0.3.4",
-    "@nextclaw/agent-chat-ui": "0.2.13",
-    "@nextclaw/ncp-react": "0.4.3"
+    "@nextclaw/ncp": "0.4.1",
+    "@nextclaw/agent-chat-ui": "0.2.14",
+    "@nextclaw/ncp-react": "0.4.5",
+    "@nextclaw/agent-chat": "0.1.4",
+    "@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,84 @@ 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'
+          }
+        ]
+      }
+    ]);
   });
 });

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,53 @@ 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 recentOptions = params.modelOptions.filter((option) => recentValueSet.has(option.value));
+  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,14 @@ export function ChatInputBarContainer() {
     [snapshot.skillRecords, officialSkillBadgeLabel]
   );
   const modelRecords = useMemo(() => toModelRecords(snapshot.modelOptions), [snapshot.modelOptions]);
+  const recentModelValues = useMemo(
+    () =>
+      chatRecentModelsManager.resolveVisible({
+        availableValues: modelRecords.map((option) => option.value),
+        minAvailableCount: CHAT_RECENT_MODELS_MIN_OPTIONS
+      }),
+    [modelRecords, snapshot.selectedModel]
+  );
   const hasModelOptions = modelRecords.length > 0;
   const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
@@ -171,13 +183,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: t('chatRecentModels'),
+        allModelsLabel: t('chatAllModels')
       }
     }),
     buildThinkingToolbarSelect({

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

@@ -22,6 +22,7 @@ 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';
 function buildNcpSendMetadata(payload: {
   model?: string;
@@ -69,6 +70,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 +156,41 @@ export function NcpChatPage({ view }: ChatPageProps) {
   const stopDisabledReason = agent.isRunning ? null : '__preparing__';
   const lastSendError = agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  useEffect(() => {
+    const flushRealtimeReload = () => {
+      if (agent.isHydrating || agent.isRunning || agent.isSending) {
+        pendingRealtimeReloadRef.current = true;
+        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/lib/i18n.ts CHANGED Viewed

@@ -185,6 +185,8 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
     zh: 'Agent 默认模型标识，使用带 provider 前缀的格式。例如：openai/gpt-5.1、anthropic/claude-opus-4-1、deepseek/deepseek-chat、minimax/MiniMax-M2.5、openrouter/openai/gpt-5.3-codex。',
     en: 'Default model identifier used by the agent. Use provider-prefixed format. Examples: openai/gpt-5.1 · anthropic/claude-opus-4-1 · deepseek/deepseek-chat · minimax/MiniMax-M2.5 · openrouter/openai/gpt-5.3-codex.'
   },
+  chatRecentModels: { zh: '最近选择', en: 'Recent' },
+  chatAllModels: { zh: '全部模型', en: 'All models' },
   maxToolIterations: { zh: '最大工具迭代次数', en: 'Max Tool Iterations' },
   saveChanges: { zh: '保存变更', en: 'Save Changes' },

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;
+  }
+}