@nextclaw/ui 0.12.15 → 0.12.16

package/dist/index.html

@@ -78,45 +78,45 @@
     })();
   </script>
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/index-D0_J-bk_.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/i18n-BhoFaF7E.js">
-  <link rel="modulepreload" crossorigin href="/assets/api-HsS9C7l0.js">
-  <link rel="modulepreload" crossorigin href="/assets/es2015-3VnZDFPs.js">
-  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-Y1cWg3R9.js">
-  <link rel="modulepreload" crossorigin href="/assets/select-D-gjRjhr.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-DIWOVzPY.js">
-  <link rel="modulepreload" crossorigin href="/assets/x-D1867E7F.js">
-  <link rel="modulepreload" crossorigin href="/assets/dialog-CYis0wx_.js">
-  <link rel="modulepreload" crossorigin href="/assets/popover-Dliq2K8O.js">
-  <link rel="modulepreload" crossorigin href="/assets/tooltip-C1XVx_h1.js">
-  <link rel="modulepreload" crossorigin href="/assets/chunk-JZWAC4HX-CMPxE3BJ.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-config-BIErdQNR.js">
-  <link rel="modulepreload" crossorigin href="/assets/theme-provider-CajCgE_N.js">
-  <link rel="modulepreload" crossorigin href="/assets/search-DpxqxcpP.js">
-  <link rel="modulepreload" crossorigin href="/assets/book-open-DJSe9YLj.js">
-  <link rel="modulepreload" crossorigin href="/assets/external-link-CPhZo92k.js">
-  <link rel="modulepreload" crossorigin href="/assets/folder-orBwjR8h.js">
-  <link rel="modulepreload" crossorigin href="/assets/logos-WPtZ1joO.js">
-  <link rel="modulepreload" crossorigin href="/assets/loader-circle-DotuB8NZ.js">
-  <link rel="modulepreload" crossorigin href="/assets/plus-BNaF7Wq5.js">
-  <link rel="modulepreload" crossorigin href="/assets/refresh-ccw-pX3BUxPF.js">
-  <link rel="modulepreload" crossorigin href="/assets/settings-C9WgQdGW.js">
-  <link rel="modulepreload" crossorigin href="/assets/sparkles-gvRilA9f.js">
-  <link rel="modulepreload" crossorigin href="/assets/trash-2-WC4Dlakj.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-BacwCbOG.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-CP6kjGaF.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-BQT0fa3g.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-zLAsjh3A.js">
-  <link rel="modulepreload" crossorigin href="/assets/logo-badge-BLQdO_th.js">
-  <link rel="modulepreload" crossorigin href="/assets/skeleton-BN6fOana.js">
-  <link rel="modulepreload" crossorigin href="/assets/chat-Rmwi-kQn.js">
-  <link rel="modulepreload" crossorigin href="/assets/key-round-B5u2XQwa.js">
-  <link rel="modulepreload" crossorigin href="/assets/message-square-CO_7rU-N.js">
-  <link rel="modulepreload" crossorigin href="/assets/app-navigation.config-Dy69P_3O.js">
-  <link rel="modulepreload" crossorigin href="/assets/notice-card-DDVM6IFQ.js">
-  <link rel="modulepreload" crossorigin href="/assets/status-dot-W2TPs1Zf.js">
-  <link rel="modulepreload" crossorigin href="/assets/app-manager-provider-CNa6cmOk.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-OrUEVLgT.css">
+  <script type="module" crossorigin src="/assets/index-mw77my39.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/i18n-CF_jgT_-.js">
+  <link rel="modulepreload" crossorigin href="/assets/api-BIg--UMJ.js">
+  <link rel="modulepreload" crossorigin href="/assets/es2015-BRVsmfFO.js">
+  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-DVAlgDOi.js">
+  <link rel="modulepreload" crossorigin href="/assets/select-tRTLG4FK.js">
+  <link rel="modulepreload" crossorigin href="/assets/dist-DWPNydLC.js">
+  <link rel="modulepreload" crossorigin href="/assets/x-BvS2y4e_.js">
+  <link rel="modulepreload" crossorigin href="/assets/dialog-t7OAmObC.js">
+  <link rel="modulepreload" crossorigin href="/assets/popover-CbQxrchk.js">
+  <link rel="modulepreload" crossorigin href="/assets/tooltip-7lsLGcL9.js">
+  <link rel="modulepreload" crossorigin href="/assets/chunk-JZWAC4HX-THqEFwu9.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-config-CXu7dFzw.js">
+  <link rel="modulepreload" crossorigin href="/assets/theme-provider-D6Cgm6i-.js">
+  <link rel="modulepreload" crossorigin href="/assets/search-Bz3Q64sr.js">
+  <link rel="modulepreload" crossorigin href="/assets/book-open-CUd69I2f.js">
+  <link rel="modulepreload" crossorigin href="/assets/external-link-D1Xqff6i.js">
+  <link rel="modulepreload" crossorigin href="/assets/folder-B_fuaX3x.js">
+  <link rel="modulepreload" crossorigin href="/assets/logos-BVCi_7_I.js">
+  <link rel="modulepreload" crossorigin href="/assets/loader-circle-DEz3bHGb.js">
+  <link rel="modulepreload" crossorigin href="/assets/plus-CdYMdiws.js">
+  <link rel="modulepreload" crossorigin href="/assets/refresh-ccw-C-ytTHiq.js">
+  <link rel="modulepreload" crossorigin href="/assets/settings-Cto6z-Ij.js">
+  <link rel="modulepreload" crossorigin href="/assets/sparkles-xZ74eW0P.js">
+  <link rel="modulepreload" crossorigin href="/assets/trash-2-WFSNa5oj.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-zXaTjrpA.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-t96ibd-b.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-DznuT-CU.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-CWlW5b-T.js">
+  <link rel="modulepreload" crossorigin href="/assets/logo-badge-CRVKkIl9.js">
+  <link rel="modulepreload" crossorigin href="/assets/skeleton-BwfJfVK3.js">
+  <link rel="modulepreload" crossorigin href="/assets/chat-CXrERmQ1.js">
+  <link rel="modulepreload" crossorigin href="/assets/key-round-DFVNXZcD.js">
+  <link rel="modulepreload" crossorigin href="/assets/message-square-CLhDWybk.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-navigation.config-xIjCAn-R.js">
+  <link rel="modulepreload" crossorigin href="/assets/notice-card-CXY09tsa.js">
+  <link rel="modulepreload" crossorigin href="/assets/status-dot-Bobpfutv.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-manager-provider-BfKiVYea.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-DuHqJ8wn.css">
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.12.15",
+  "version": "0.12.16",
   "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-ui": "0.3.11",
     "@nextclaw/ncp-http-agent-client": "0.3.17",
-    "@nextclaw/agent-chat": "0.1.10",
-    "@nextclaw/agent-chat-ui": "0.3.10",
     "@nextclaw/ncp-react": "0.4.25",
-    "@nextclaw/ncp": "0.5.5"
+    "@nextclaw/ncp": "0.5.5",
+    "@nextclaw/agent-chat": "0.1.10"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/features/chat/components/conversation/chat-input-bar.container.tsx

@@ -6,6 +6,7 @@ import type { SessionSkillEntryView } from '@/shared/lib/api';
 import { buildChatSlashItems, buildModelStateHint, buildModelToolbarSelect, buildSkillPickerModel, buildThinkingToolbarSelect, type ChatModelRecord, type ChatSkillRecord, type ChatThinkingLevel } from '@/features/chat/utils/chat-input-bar.utils';
 import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import { useI18n } from '@/app/components/i18n-provider';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { chatRecentModelsManager, CHAT_RECENT_MODELS_MIN_OPTIONS } from '@/features/chat/managers/chat-recent-models.manager';
 import { chatRecentSkillsManager, CHAT_RECENT_SKILLS_MIN_OPTIONS } from '@/features/chat/managers/chat-recent-skills.manager';
@@ -203,6 +204,7 @@ function buildSkillPicker(params: { allSkillsLabel: string; presenter: ChatPrese
 export function ChatInputBarContainer() {
   const presenter = usePresenter();
   const { language } = useI18n();
+  const { isMobile } = useViewportLayout();
   const snapshot = useChatInputStore((state) => state.snapshot);
   const runtimeAvailability = useChatRuntimeAvailability();
   const [slashQuery, setSlashQuery] = useState<string | null>(null);
@@ -215,7 +217,9 @@ export function ChatInputBarContainer() {
   const isModelOptionsEmpty = isNcpChatModelOptionsEmpty(snapshot);
   const inputDisabled = isNcpChatComposerDisabled(snapshot);
   const attachmentSupported = typeof presenter.chatInputManager.addAttachments === 'function';
-  const textareaPlaceholder = isModelOptionsEmpty ? t('chatModelNoOptions') : t('chatInputPlaceholder');
+  const textareaPlaceholder = isModelOptionsEmpty
+    ? t('chatModelNoOptions')
+    : t(isMobile ? 'chatInputPlaceholderCompact' : 'chatInputPlaceholder');
   const slashItems = useMemo(
     () => buildChatSlashItems(skillRecords, slashQuery ?? '', labels.slashTexts, recentSkillValues),
     [labels.slashTexts, recentSkillValues, skillRecords, slashQuery]

package/src/features/chat/utils/chat-input-bar.utils.test.ts

@@ -212,14 +212,14 @@ describe('buildModelToolbarSelect', () => {
     });
 
     expect(select.value).toBe('minimax/MiniMax-M2.7');
-    expect(select.selectedLabel).toBe('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('keeps provider labels in the dropdown while using only the model name in the trigger', () => {
+  it('keeps the full provider/model label in shared state while exposing a compact mobile label', () => {
     const select = buildModelToolbarSelect({
       modelOptions: [
         {
@@ -241,7 +241,7 @@ describe('buildModelToolbarSelect', () => {
       }
     });
 
-    expect(select.selectedLabel).toBe('claude-sonnet-4-very-long-name');
+    expect(select.selectedLabel).toBe('Anthropic/claude-sonnet-4-very-long-name');
     expect(select.options[0]?.label).toBe('Anthropic/claude-sonnet-4-very-long-name');
   });
 

package/src/features/chat/utils/chat-input-toolbar.utils.ts

@@ -113,7 +113,7 @@ export function buildModelToolbarSelect({
     value: resolvedValue,
     placeholder: texts.modelSelectPlaceholder,
     selectedLabel: resolvedModelOption
-      ? resolvedModelOption.modelLabel.trim() || formatModelOptionLabel(resolvedModelOption)
+      ? formatModelOptionLabel(resolvedModelOption)
       : undefined,
     icon: "sparkles",
     options: modelOptions.map((option) => ({

package/src/index.css

@@ -220,6 +220,16 @@
   --md-code-toolbar-bg: rgba(15, 23, 42, 0.56);
   --md-code-toolbar-border: rgba(148, 163, 184, 0.3);
   --md-code-text: #e5e7eb;
+  --md-code-muted: #9ca3af;
+  --md-code-keyword: #c084fc;
+  --md-code-title: #93c5fd;
+  --md-code-string: #86efac;
+  --md-code-number: #fbbf24;
+  --md-code-comment: #94a3b8;
+  --md-code-attr: #67e8f9;
+  --md-code-meta: #f0abfc;
+  --md-code-deletion: #fca5a5;
+  --md-code-addition: #86efac;
   --md-table-head-bg: rgba(148, 163, 184, 0.14);
 
   color: var(--md-text);
@@ -241,6 +251,16 @@
   --md-code-toolbar-bg: rgba(2, 6, 23, 0.88);
   --md-code-toolbar-border: rgba(191, 219, 254, 0.26);
   --md-code-text: #e2e8f0;
+  --md-code-muted: #a5b4fc;
+  --md-code-keyword: #d8b4fe;
+  --md-code-title: #bfdbfe;
+  --md-code-string: #bbf7d0;
+  --md-code-number: #fde68a;
+  --md-code-comment: #cbd5e1;
+  --md-code-attr: #a5f3fc;
+  --md-code-meta: #f5d0fe;
+  --md-code-deletion: #fecaca;
+  --md-code-addition: #bbf7d0;
   --md-table-head-bg: rgba(191, 219, 254, 0.16);
 }
 
@@ -394,9 +414,12 @@
 .chat-codeblock {
   margin: 0.2rem 0 0.1rem;
   border: 1px solid var(--md-code-toolbar-border);
-  border-radius: 0.78rem;
+  border-radius: 0.5rem;
   overflow: hidden;
-  background: var(--md-code-surface);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
+    var(--md-code-surface);
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.13);
 }
 
 .chat-codeblock-toolbar {
@@ -426,7 +449,7 @@
   font-weight: 600;
   color: var(--md-code-text);
   border: 1px solid var(--md-code-toolbar-border);
-  border-radius: 0.48rem;
+  border-radius: 0.42rem;
   padding: 0.18rem 0.36rem;
   background: transparent;
   cursor: pointer;
@@ -439,17 +462,86 @@
 
 .chat-codeblock pre {
   margin: 0;
-  padding: 0.75rem 0.82rem 0.8rem;
+  padding: 0.8rem 0.9rem 0.86rem;
   overflow-x: auto;
   background: transparent;
+  scrollbar-color: rgba(148, 163, 184, 0.48) transparent;
+  scrollbar-width: thin;
 }
 
 .chat-codeblock code {
   display: block;
   min-width: max-content;
   white-space: pre;
-  line-height: 1.58;
+  line-height: 1.62;
   color: var(--md-code-text);
+  font-size: 0.79rem;
+  font-variant-ligatures: none;
+  tab-size: 2;
+}
+
+.chat-codeblock .hljs-keyword,
+.chat-codeblock .hljs-built_in,
+.chat-codeblock .hljs-type,
+.chat-codeblock .hljs-literal,
+.chat-codeblock .hljs-selector-tag {
+  color: var(--md-code-keyword);
+}
+
+.chat-codeblock .hljs-title,
+.chat-codeblock .hljs-title.function_,
+.chat-codeblock .hljs-title.class_,
+.chat-codeblock .hljs-section,
+.chat-codeblock .hljs-selector-id {
+  color: var(--md-code-title);
+}
+
+.chat-codeblock .hljs-string,
+.chat-codeblock .hljs-regexp,
+.chat-codeblock .hljs-symbol,
+.chat-codeblock .hljs-bullet {
+  color: var(--md-code-string);
+}
+
+.chat-codeblock .hljs-number,
+.chat-codeblock .hljs-variable,
+.chat-codeblock .hljs-template-variable,
+.chat-codeblock .hljs-params {
+  color: var(--md-code-number);
+}
+
+.chat-codeblock .hljs-comment,
+.chat-codeblock .hljs-quote {
+  color: var(--md-code-comment);
+  font-style: italic;
+}
+
+.chat-codeblock .hljs-attr,
+.chat-codeblock .hljs-attribute,
+.chat-codeblock .hljs-property,
+.chat-codeblock .hljs-name,
+.chat-codeblock .hljs-selector-class {
+  color: var(--md-code-attr);
+}
+
+.chat-codeblock .hljs-meta,
+.chat-codeblock .hljs-doctag,
+.chat-codeblock .hljs-tag {
+  color: var(--md-code-meta);
+}
+
+.chat-codeblock .hljs-subst,
+.chat-codeblock .hljs-punctuation,
+.chat-codeblock .hljs-operator {
+  color: var(--md-code-muted);
+}
+
+.chat-codeblock .hljs-deletion {
+  color: var(--md-code-deletion);
+}
+
+.chat-codeblock .hljs-addition {
+  color: var(--md-code-addition);
 }
 
 .chat-table-wrap {

package/src/shared/components/common/agent-avatar.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { AgentAvatar } from './agent-avatar';
+
+describe('AgentAvatar', () => {
+  it('uses the configured image for the main agent before fallback', () => {
+    render(
+      <AgentAvatar
+        agentId="main"
+        displayName="Main"
+        avatarUrl="https://example.com/main-avatar.png"
+      />,
+    );
+
+    const avatar = screen.getByRole('img', { name: 'Main' });
+    expect(avatar.getAttribute('src')).toBe('https://example.com/main-avatar.png');
+    expect(avatar.querySelector('svg')).toBeNull();
+  });
+
+  it('uses the bot icon for the main agent fallback', () => {
+    render(<AgentAvatar agentId="main" displayName="Main" />);
+
+    const avatar = screen.getByLabelText('Main');
+    expect(avatar.querySelector('svg')).toBeTruthy();
+    expect(avatar.textContent).not.toContain('M');
+  });
+
+  it('keeps letter fallback avatars for specialist agents', () => {
+    render(<AgentAvatar agentId="engineer" displayName="Engineer" />);
+
+    expect(screen.getByLabelText('Engineer').textContent).toBe('E');
+  });
+});

package/src/shared/components/common/agent-avatar.tsx

@@ -1,4 +1,5 @@
 import { cn } from '@/shared/lib/utils';
+import { Bot } from 'lucide-react';
 
 type AgentAvatarProps = {
   agentId: string;
@@ -25,14 +26,6 @@ function hashText(value: string): number {
   return Math.abs(hash);
 }
 
-function resolveLetter(value: string): string {
-  const trimmed = value.trim();
-  if (!trimmed) {
-    return 'A';
-  }
-  return trimmed.slice(0, 1).toUpperCase();
-}
-
 export function AgentAvatar({ agentId, displayName, avatarUrl, className }: AgentAvatarProps) {
   const seed = displayName?.trim() || agentId;
   const [bgClass, textClass] = PALETTE[hashText(agentId) % PALETTE.length] ?? PALETTE[0];
@@ -57,7 +50,11 @@ export function AgentAvatar({ agentId, displayName, avatarUrl, className }: Agen
       )}
       aria-label={displayName?.trim() || agentId}
     >
-      {resolveLetter(seed)}
+      {agentId.trim().toLowerCase() === 'main' ? (
+        <Bot className="h-[55%] w-[55%]" strokeWidth={2.4} />
+      ) : (
+        (seed.trim() || 'A').slice(0, 1).toUpperCase()
+      )}
     </div>
   );
 }

package/src/shared/lib/i18n/chat.ts

@@ -67,7 +67,8 @@ export const CHAT_LABELS: Record<string, { zh: string; en: string }> = {
     zh: '聊天能力启动失败，请稍后重试或检查服务日志。',
     en: 'Chat startup failed. Please retry in a moment or inspect the service logs.'
   },
-  chatInputPlaceholder: { zh: '发消息...', en: 'Message NextClaw...' },
+  chatInputPlaceholder: { zh: '输入消息，输入 / 选择技能，Enter 发送，Shift + Enter 换行', en: 'Type a message, type / to select skills, Enter to send, Shift + Enter for newline' },
+  chatInputPlaceholderCompact: { zh: '发消息...', en: 'Message NextClaw...' },
   chatInputHint: { zh: '支持多轮上下文，默认走当前会话。', en: 'Multi-turn context is preserved in the current session.' },
   chatSlashSectionCommands: { zh: '命令', en: 'Commands' },
   chatSlashSectionSkills: { zh: '技能', en: 'Skills' },