@nextclaw/ui 0.10.0 → 0.10.1

package/src/components/chat/ncp/ncp-chat-page-data.test.ts

@@ -16,6 +16,14 @@ const modelOptions: ChatModelOption[] = [
 ];
 
 describe('filterModelOptionsBySessionType', () => {
+  it('keeps the full model catalog when the session type does not publish a supportedModels whitelist', () => {
+    expect(
+      filterModelOptionsBySessionType({
+        modelOptions
+      })
+    ).toEqual(modelOptions);
+  });
+
   it('keeps only session-type-supported models when the runtime publishes a filtered list', () => {
     expect(
       filterModelOptionsBySessionType({

package/src/components/chat/ncp/ncp-chat-thread.manager.ts

@@ -79,7 +79,6 @@ export class NcpChatThreadManager {
     try {
       await deleteNcpSessionApi(selectedSessionKey);
       this.streamActionsManager.resetStreamState();
-      useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
       this.uiManager.goToChatRoot({ replace: true });
       await this.actions.refetchSessions();
     } finally {

package/src/components/chat/presenter/chat-presenter-context.tsx

@@ -1,4 +1,5 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 import type { SetStateAction } from 'react';
@@ -13,6 +14,11 @@ export type ChatInputManagerLike = {
   syncSnapshot: (patch: Record<string, unknown>) => void;
   setDraft: (next: SetStateAction<string>) => void;
   setComposerNodes: (next: SetStateAction<ChatComposerNode[]>) => void;
+  addAttachments?: (attachments: NcpDraftAttachment[]) => void;
+  restoreComposerState?: (
+    nodes: ChatComposerNode[],
+    attachments: NcpDraftAttachment[]
+  ) => void;
   setPendingSessionType: (next: SetStateAction<string>) => void;
   send: () => Promise<void>;
   stop: () => Promise<void>;

package/src/components/chat/stores/chat-input.store.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import type { MarketplaceInstalledRecord } from '@/api/types';
 import type { ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
@@ -8,6 +9,7 @@ import { createInitialChatComposerNodes } from '@/components/chat/chat-composer-
 export type ChatInputSnapshot = {
   isProviderStateResolved: boolean;
   composerNodes: ChatComposerNode[];
+  attachments: NcpDraftAttachment[];
   draft: string;
   pendingSessionType: string;
   defaultSessionType: string;
@@ -50,6 +52,7 @@ type ChatInputStore = {
 const initialSnapshot: ChatInputSnapshot = {
   isProviderStateResolved: false,
   composerNodes: createInitialChatComposerNodes(),
+  attachments: [],
   draft: '',
   pendingSessionType: 'native',
   defaultSessionType: 'native',

package/src/components/config/ChannelsList.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type * as ReactQueryModule from '@tanstack/react-query';
 import { ChannelsList } from '@/components/config/ChannelsList';
 
 const mocks = vi.hoisted(() => ({
@@ -58,7 +59,7 @@ vi.mock('qrcode', () => ({
 }));
 
 vi.mock('@tanstack/react-query', async () => {
-  const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+  const actual = await vi.importActual<typeof ReactQueryModule>('@tanstack/react-query');
   return {
     ...actual,
     useQueryClient: () => ({

package/src/components/config/weixin-channel-auth-section.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type * as ReactQueryModule from '@tanstack/react-query';
 import { WeixinChannelAuthSection } from './weixin-channel-auth-section';
 
 const mocks = vi.hoisted(() => ({
@@ -9,7 +10,7 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock('@tanstack/react-query', async () => {
-  const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+  const actual = await vi.importActual<typeof ReactQueryModule>('@tanstack/react-query');
   return {
     ...actual,
     useQueryClient: () => ({

package/src/components/layout/Sidebar.tsx

@@ -5,9 +5,10 @@ import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOp
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { BrandHeader } from '@/components/common/BrandHeader';
+import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/components/layout/sidebar-items';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { SelectItem } from '@/components/ui/select';
 import { useRemoteStatus } from '@/hooks/useRemoteAccess';
 import { useAppPresenter } from '@/presenter/app-presenter-context';
 
@@ -23,6 +24,7 @@ export function Sidebar({ mode }: SidebarProps) {
   const remoteStatus = useRemoteStatus();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
+  const isSettingsMode = mode === 'settings';
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ?? language;
   const currentThemeLabel = t(THEME_OPTIONS.find((option) => option.value === theme)?.labelKey ?? 'themeWarm');
   const accountEmail = remoteStatus.data?.account.email?.trim();
@@ -119,11 +121,12 @@ export function Sidebar({ mode }: SidebarProps) {
       icon: Wrench,
     }
   ];
-  const navItems = mode === 'main' ? mainNavItems : settingsNavItems;
+  const navItems = isSettingsMode ? settingsNavItems : mainNavItems;
+  const sidebarDensity = isSettingsMode ? 'compact' : 'default';
 
   return (
     <aside className="w-[240px] shrink-0 flex h-full min-h-0 flex-col overflow-hidden bg-secondary px-4 py-6">
-      {mode === 'settings' ? (
+      {isSettingsMode ? (
         <div className="shrink-0 px-2 pb-3">
           <div
             className="flex items-center gap-2 px-1 py-1"
@@ -131,7 +134,7 @@ export function Sidebar({ mode }: SidebarProps) {
           >
             <NavLink
               to="/chat"
-              className="group inline-flex min-w-0 items-center gap-1.5 rounded-lg px-1 py-1 text-[12px] font-medium text-gray-500 transition-colors hover:text-gray-900"
+              className="group inline-flex min-w-0 items-center gap-1.5 rounded-lg px-1 py-1 text-[12px] font-medium text-gray-500 transition-colors hover:bg-gray-200/60 hover:text-gray-900"
             >
               <ArrowLeft className="h-3.5 w-3.5 shrink-0 text-gray-400 group-hover:text-gray-700" />
               <span className="truncate">{t('backToMain')}</span>
@@ -149,35 +152,16 @@ export function Sidebar({ mode }: SidebarProps) {
       <div className="flex min-h-0 flex-1 flex-col">
         {/* Navigation */}
         <nav className="custom-scrollbar min-h-0 flex-1 overflow-y-auto pr-1">
-          <ul className="space-y-1 pb-4">
+          <ul className={cn(isSettingsMode ? 'space-y-0.5 pb-3' : 'space-y-1 pb-4')}>
             {navItems.map((item) => {
-              const Icon = item.icon;
-
               return (
                 <li key={item.target}>
-                  <NavLink
+                  <SidebarNavLinkItem
                     to={item.target}
-                    className={({ isActive }) =>
-                      cn(
-                        'group w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium transition-all duration-base',
-                        isActive
-                          ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                          : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
-                      )
-                    }
-                  >
-                    {({ isActive }) => (
-                      <>
-                        <Icon
-                          className={cn(
-                            'h-[17px] w-[17px] transition-colors',
-                            isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
-                          )}
-                        />
-                        <span className="flex-1 text-left">{item.label}</span>
-                      </>
-                    )}
-                  </NavLink>
+                    label={item.label}
+                    icon={item.icon}
+                    density={sidebarDensity}
+                  />
                 </li>
               );
             })}
@@ -185,91 +169,67 @@ export function Sidebar({ mode }: SidebarProps) {
         </nav>
 
         {/* Footer actions stay reachable while the nav scrolls independently. */}
-        <div className="mt-3 shrink-0 border-t border-[#dde0ea] bg-secondary pt-3">
-          {mode === 'settings' ? (
-            <button
+        <div className={cn('shrink-0 border-t border-[#dde0ea] bg-secondary', isSettingsMode ? 'mt-2 pt-3' : 'mt-3 pt-3')}>
+          {isSettingsMode ? (
+            <SidebarActionItem
               onClick={() => presenter.accountManager.openAccountPanel()}
-              className="mb-2 w-full rounded-xl px-3 py-2.5 text-left text-gray-600 transition-all duration-base hover:bg-[#e4e7ef] hover:text-gray-900"
-              data-testid="settings-sidebar-account-entry"
-            >
-              <div className="flex items-start gap-3">
-                <KeyRound className="mt-0.5 h-[17px] w-[17px] shrink-0 text-gray-400" />
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-[14px] font-medium text-gray-600">
-                    {t('remoteAccountEntryManage')}
-                  </p>
-                  <p className="mt-1 truncate text-xs text-gray-500">
-                    {accountConnected ? accountEmail || t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
-                  </p>
-                </div>
-              </div>
-            </button>
+              icon={KeyRound}
+              label={t('remoteAccountEntryManage')}
+              density="compact"
+              className="mb-1.5"
+              trailing={accountConnected ? accountEmail || t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
+              trailingClassName="max-w-[92px] truncate text-right"
+              testId="settings-sidebar-account-entry"
+              trailingTestId="settings-sidebar-account-status"
+            />
           ) : null}
           {mode === 'main' && (
             <div className="mb-2">
-              <NavLink
+              <SidebarNavLinkItem
                 to="/settings"
-                className={({ isActive }) =>
-                  cn(
-                    'group w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium transition-all duration-base',
-                    isActive
-                      ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                      : 'text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900'
-                  )
-                }
-              >
-                {({ isActive }) => (
-                  <>
-                    <Settings className={cn('h-[17px] w-[17px] transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
-                    <span className="flex-1 text-left">{t('settings')}</span>
-                  </>
-                )}
-              </NavLink>
+                label={t('settings')}
+                icon={Settings}
+              />
             </div>
           )}
           <div className="mb-2">
-            <Select value={theme} onValueChange={(value) => handleThemeSwitch(value as UiTheme)}>
-              <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent px-3 py-2.5 text-[14px] font-medium text-gray-600 shadow-none hover:bg-[#e4e7ef] focus:ring-0">
-                <div className="flex min-w-0 items-center gap-3">
-                  <Palette className="h-[17px] w-[17px] text-gray-400" />
-                  <span className="text-left">{t('theme')}</span>
-                </div>
-                <span className="ml-auto text-xs text-gray-500">{currentThemeLabel}</span>
-              </SelectTrigger>
-              <SelectContent>
-                {THEME_OPTIONS.map((option) => (
-                  <SelectItem key={option.value} value={option.value} className="text-xs">
-                    {t(option.labelKey)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <SidebarSelectItem
+              value={theme}
+              onValueChange={(value) => handleThemeSwitch(value as UiTheme)}
+              icon={Palette}
+              label={t('theme')}
+              valueLabel={currentThemeLabel}
+              density={sidebarDensity}
+            >
+              {THEME_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs">
+                  {t(option.labelKey)}
+                </SelectItem>
+              ))}
+            </SidebarSelectItem>
           </div>
           <div className="mb-2">
-            <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
-              <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent px-3 py-2.5 text-[14px] font-medium text-gray-600 shadow-none hover:bg-[#e4e7ef] focus:ring-0">
-                <div className="flex min-w-0 items-center gap-3">
-                  <Languages className="h-[17px] w-[17px] text-gray-400" />
-                  <span className="text-left">{t('language')}</span>
-                </div>
-                <span className="ml-auto text-xs text-gray-500">{currentLanguageLabel}</span>
-              </SelectTrigger>
-              <SelectContent>
-                {LANGUAGE_OPTIONS.map((option) => (
-                  <SelectItem key={option.value} value={option.value} className="text-xs">
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <SidebarSelectItem
+              value={language}
+              onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}
+              icon={Languages}
+              label={t('language')}
+              valueLabel={currentLanguageLabel}
+              density={sidebarDensity}
+            >
+              {LANGUAGE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs">
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SidebarSelectItem>
           </div>
-          <button
+          <SidebarActionItem
             onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-            className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium text-gray-600 transition-all duration-base hover:bg-[#e4e7ef] hover:text-gray-800"
-          >
-            <BookOpen className="h-[17px] w-[17px] text-gray-400" />
-            <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
-          </button>
+            icon={BookOpen}
+            label={t('docBrowserHelp')}
+            density={sidebarDensity}
+          />
         </div>
       </div>
     </aside>

package/src/components/layout/sidebar-items.tsx

@@ -0,0 +1,172 @@
+import type { ComponentType, ReactNode } from 'react';
+import { NavLink } from 'react-router-dom';
+import { Select, SelectContent, SelectTrigger } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+type SidebarIcon = ComponentType<{ className?: string }>;
+type SidebarItemDensity = 'default' | 'compact';
+
+type SidebarItemTone = {
+  row: string;
+  icon: string;
+  value: string;
+  gap: string;
+};
+
+const SIDEBAR_ITEM_TONES: Record<SidebarItemDensity, SidebarItemTone> = {
+  default: {
+    row: 'gap-3 px-3 py-2.5 text-[14px]',
+    icon: 'h-[17px] w-[17px]',
+    value: 'text-xs',
+    gap: 'gap-3'
+  },
+  compact: {
+    row: 'gap-2.5 px-3 py-2 text-[13px]',
+    icon: 'h-4 w-4',
+    value: 'text-[11px]',
+    gap: 'gap-2.5'
+  }
+};
+
+function getSidebarItemTone(density: SidebarItemDensity): SidebarItemTone {
+  return SIDEBAR_ITEM_TONES[density];
+}
+
+type SidebarNavLinkItemProps = {
+  to: string;
+  label: ReactNode;
+  icon: SidebarIcon;
+  density?: SidebarItemDensity;
+  className?: string;
+};
+
+export function SidebarNavLinkItem({
+  to,
+  label,
+  icon: Icon,
+  density = 'default',
+  className
+}: SidebarNavLinkItemProps) {
+  const tone = getSidebarItemTone(density);
+
+  return (
+    <NavLink
+      to={to}
+      className={({ isActive }) =>
+        cn(
+          'group flex w-full items-center rounded-xl font-medium transition-colors duration-base',
+          tone.row,
+          isActive
+            ? 'bg-gray-200 text-gray-900 shadow-sm'
+            : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900',
+          className
+        )
+      }
+    >
+      {({ isActive }) => (
+        <>
+          <Icon
+            className={cn(
+              tone.icon,
+              'transition-colors',
+              isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
+            )}
+          />
+          <span className="min-w-0 flex-1 text-left">{label}</span>
+        </>
+      )}
+    </NavLink>
+  );
+}
+
+type SidebarActionItemProps = {
+  label: ReactNode;
+  icon: SidebarIcon;
+  onClick: () => void;
+  density?: SidebarItemDensity;
+  className?: string;
+  labelClassName?: string;
+  trailing?: ReactNode;
+  trailingClassName?: string;
+  testId?: string;
+  trailingTestId?: string;
+};
+
+export function SidebarActionItem({
+  label,
+  icon: Icon,
+  onClick,
+  density = 'default',
+  className,
+  labelClassName,
+  trailing,
+  trailingClassName,
+  testId,
+  trailingTestId
+}: SidebarActionItemProps) {
+  const tone = getSidebarItemTone(density);
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'flex w-full items-center rounded-xl font-medium text-gray-600 transition-all duration-base hover:bg-gray-200/60 hover:text-gray-800',
+        tone.row,
+        className
+      )}
+      data-testid={testId}
+    >
+      <Icon className={cn(tone.icon, 'shrink-0 text-gray-400')} />
+      <span className={cn('min-w-0 flex-1 text-left', labelClassName)}>{label}</span>
+      {trailing ? (
+        <span
+          className={cn('shrink-0 text-gray-500', tone.value, trailingClassName)}
+          data-testid={trailingTestId}
+        >
+          {trailing}
+        </span>
+      ) : null}
+    </button>
+  );
+}
+
+type SidebarSelectItemProps = {
+  label: ReactNode;
+  icon: SidebarIcon;
+  value: string;
+  valueLabel: ReactNode;
+  onValueChange: (value: string) => void;
+  density?: SidebarItemDensity;
+  children: ReactNode;
+};
+
+export function SidebarSelectItem({
+  label,
+  icon: Icon,
+  value,
+  valueLabel,
+  onValueChange,
+  density = 'default',
+  children
+}: SidebarSelectItemProps) {
+  const tone = getSidebarItemTone(density);
+
+  return (
+    <Select value={value} onValueChange={onValueChange}>
+      <SelectTrigger
+        className={cn(
+          'h-auto w-full rounded-xl border-0 bg-transparent font-medium text-gray-600 shadow-none hover:bg-gray-200/60 focus:ring-0',
+          tone.row
+        )}
+      >
+        <div className={cn('flex min-w-0 items-center', tone.gap)}>
+          <Icon className={cn(tone.icon, 'text-gray-400')} />
+          <span className="text-left">{label}</span>
+        </div>
+        <span className={cn('ml-auto text-gray-500', tone.value)}>{valueLabel}</span>
+      </SelectTrigger>
+      <SelectContent>{children}</SelectContent>
+    </Select>
+  );
+}

package/src/components/layout/sidebar.layout.test.tsx

@@ -64,9 +64,10 @@ describe('Sidebar', () => {
     expect(nav?.className).toContain('flex-1');
     expect(nav?.className).toContain('min-h-0');
     expect(nav?.className).toContain('overflow-y-auto');
+    expect(screen.getByRole('link', { current: 'page' }).className).not.toContain('font-semibold');
   });
 
-  it('uses a compact single-row header for settings mode', () => {
+  it('keeps the original compact single-row header in settings mode', () => {
     render(
       <MemoryRouter initialEntries={['/model']}>
         <Sidebar mode="settings" />
@@ -74,15 +75,17 @@ describe('Sidebar', () => {
     );
 
     const header = screen.getByTestId('settings-sidebar-header');
+    const backLink = screen.getByRole('link', { name: 'Back to Main' });
 
     expect(header).toBeTruthy();
     expect(screen.getByRole('heading', { name: 'Settings' })).toBeTruthy();
-    expect(screen.getByRole('link', { name: 'Back to Main' })).toBeTruthy();
+    expect(backLink).toBeTruthy();
     expect(header.className).not.toContain('bg-white');
     expect(header.className).not.toContain('rounded-2xl');
+    expect(backLink.className).toContain('hover:bg-gray-200/60');
   });
 
-  it('renders the account entry with the same neutral visual tone as other footer items', () => {
+  it('keeps the footer utilities compact without changing the top header structure', () => {
     render(
       <MemoryRouter initialEntries={['/model']}>
         <Sidebar mode="settings" />
@@ -90,10 +93,14 @@ describe('Sidebar', () => {
     );
 
     const accountEntry = screen.getByTestId('settings-sidebar-account-entry');
+    const accountStatus = screen.getByTestId('settings-sidebar-account-status');
 
     expect(accountEntry).toBeTruthy();
-    expect(screen.getByText('Account and Device Entry')).toBeTruthy();
+    expect(accountEntry.textContent).toContain('Account');
     expect(screen.getByText('user@example.com')).toBeTruthy();
+    expect(accountEntry.className).toContain('py-2');
     expect(accountEntry.className).toContain('text-gray-600');
+    expect(accountEntry.className).toContain('hover:bg-gray-200/60');
+    expect(accountStatus.className).toContain('text-[11px]');
   });
 });