@nextclaw/ui 0.5.47 → 0.6.0

package/src/components/config/RuntimeConfig.tsx

@@ -28,6 +28,7 @@ function createEmptyAgent(): AgentProfileView {
     default: false,
     workspace: '',
     model: '',
+    engine: '',
     contextTokens: undefined,
     maxToolIterations: undefined
   };
@@ -62,6 +63,7 @@ export function RuntimeConfig() {
   const [dmScope, setDmScope] = useState<DmScope>('per-channel-peer');
   const [maxPingPongTurns, setMaxPingPongTurns] = useState(0);
   const [defaultContextTokens, setDefaultContextTokens] = useState(200000);
+  const [defaultEngine, setDefaultEngine] = useState('native');
 
   useEffect(() => {
     if (!config) {
@@ -73,6 +75,7 @@ export function RuntimeConfig() {
         default: Boolean(agent.default),
         workspace: agent.workspace ?? '',
         model: agent.model ?? '',
+        engine: agent.engine ?? '',
         contextTokens: agent.contextTokens,
         maxToolIterations: agent.maxToolIterations
       }))
@@ -95,13 +98,16 @@ export function RuntimeConfig() {
     setDmScope((config.session?.dmScope as DmScope) ?? 'per-channel-peer');
     setMaxPingPongTurns(config.session?.agentToAgent?.maxPingPongTurns ?? 0);
     setDefaultContextTokens(config.agents.defaults.contextTokens ?? 200000);
+    setDefaultEngine(config.agents.defaults.engine ?? 'native');
   }, [config]);
 
   const uiHints = schema?.uiHints;
   const dmScopeHint = hintForPath('session.dmScope', uiHints);
   const maxPingHint = hintForPath('session.agentToAgent.maxPingPongTurns', uiHints);
   const defaultContextTokensHint = hintForPath('agents.defaults.contextTokens', uiHints);
+  const defaultEngineHint = hintForPath('agents.defaults.engine', uiHints);
   const agentContextTokensHint = hintForPath('agents.list.*.contextTokens', uiHints);
+  const agentEngineHint = hintForPath('agents.list.*.engine', uiHints);
   const agentsHint = hintForPath('agents.list', uiHints);
   const bindingsHint = hintForPath('bindings', uiHints);
 
@@ -141,6 +147,9 @@ export function RuntimeConfig() {
         if (agent.model?.trim()) {
           normalized.model = agent.model.trim();
         }
+        if (agent.engine?.trim()) {
+          normalized.engine = agent.engine.trim();
+        }
         if (typeof agent.contextTokens === 'number') {
           normalized.contextTokens = Math.max(1000, agent.contextTokens);
         }
@@ -203,7 +212,8 @@ export function RuntimeConfig() {
         data: {
           agents: {
             defaults: {
-              contextTokens: Math.max(1000, defaultContextTokens)
+              contextTokens: Math.max(1000, defaultContextTokens),
+              engine: defaultEngine.trim() || 'native'
             },
             list: normalizedAgents
           },
@@ -251,6 +261,19 @@ export function RuntimeConfig() {
               {defaultContextTokensHint?.help ?? t('defaultContextTokensHelp')}
             </p>
           </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-800">
+              {defaultEngineHint?.label ?? t('defaultEngine')}
+            </label>
+            <Input
+              value={defaultEngine}
+              onChange={(event) => setDefaultEngine(event.target.value)}
+              placeholder={t('defaultEnginePlaceholder')}
+            />
+            <p className="text-xs text-gray-500">
+              {defaultEngineHint?.help ?? t('defaultEngineHelp')}
+            </p>
+          </div>
           <div className="space-y-2">
             <label className="text-sm font-medium text-gray-800">{dmScopeHint?.label ?? t('dmScope')}</label>
             <Select value={dmScope} onValueChange={(v) => setDmScope(v as DmScope)}>
@@ -308,6 +331,11 @@ export function RuntimeConfig() {
                   onChange={(event) => updateAgent(index, { model: event.target.value })}
                   placeholder={t('modelOverridePlaceholder')}
                 />
+                <Input
+                  value={agent.engine ?? ''}
+                  onChange={(event) => updateAgent(index, { engine: event.target.value })}
+                  placeholder={agentEngineHint?.label ?? t('engineOverridePlaceholder')}
+                />
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                   <Input
                     type="number"

package/src/components/layout/AppLayout.tsx

@@ -1,7 +1,9 @@
 import { lazy, Suspense } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Sidebar } from './Sidebar';
 import { DocBrowserProvider, useDocBrowser } from '@/components/doc-browser/DocBrowserContext';
 import { useDocLinkInterceptor } from '@/components/doc-browser/useDocLinkInterceptor';
+import { cn } from '@/lib/utils';
 
 const DocBrowser = lazy(async () => ({ default: (await import('@/components/doc-browser/DocBrowser')).DocBrowser }));
 
@@ -9,20 +11,54 @@ interface AppLayoutProps {
   children: React.ReactNode;
 }
 
+function isMainWorkspaceRoute(pathname: string): boolean {
+  const normalized = pathname.toLowerCase();
+  return (
+    normalized === '/chat' ||
+    normalized.startsWith('/chat/') ||
+    normalized === '/skills' ||
+    normalized.startsWith('/skills/') ||
+    normalized === '/cron' ||
+    normalized.startsWith('/cron/')
+  );
+}
+
+function isChannelsRoute(pathname: string): boolean {
+  const normalized = pathname.toLowerCase();
+  return normalized === '/channels' || normalized.startsWith('/channels/');
+}
+
 function AppLayoutInner({ children }: AppLayoutProps) {
   const { isOpen, mode } = useDocBrowser();
   useDocLinkInterceptor();
+  const { pathname } = useLocation();
+  const isMainRoute = isMainWorkspaceRoute(pathname);
+  const lockPageScroll = isChannelsRoute(pathname);
 
   return (
     <div className="h-screen flex bg-background font-sans text-foreground">
-      <Sidebar />
+      {!isMainRoute && <Sidebar mode="settings" />}
       <div className="flex-1 flex min-w-0 overflow-hidden relative">
         <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-          <main className="flex-1 overflow-auto custom-scrollbar p-8">
-            <div className="max-w-6xl mx-auto animate-fade-in h-full">
-              {children}
-            </div>
-          </main>
+          {isMainRoute ? (
+            <div className="flex-1 h-full overflow-hidden">{children}</div>
+          ) : (
+            <main
+              className={cn(
+                'flex-1 custom-scrollbar p-8',
+                lockPageScroll ? 'overflow-auto xl:overflow-hidden' : 'overflow-auto'
+              )}
+            >
+              <div
+                className={cn(
+                  'max-w-6xl mx-auto animate-fade-in h-full',
+                  lockPageScroll && 'min-h-0 xl:overflow-hidden'
+                )}
+              >
+                {children}
+              </div>
+            </main>
+          )}
         </div>
         {/* Doc Browser: docked mode renders inline, floating mode renders as overlay */}
         {isOpen && mode === 'docked' && (

package/src/components/layout/Sidebar.tsx

@@ -1,14 +1,20 @@
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 
-export function Sidebar() {
+type SidebarMode = 'main' | 'settings';
+
+type SidebarProps = {
+  mode: SidebarMode;
+};
+
+export function Sidebar({ mode }: SidebarProps) {
   const docBrowser = useDocBrowser();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
@@ -30,12 +36,26 @@ export function Sidebar() {
     setTheme(nextTheme);
   };
 
-  const navItems = [
+  // Core navigation items - primary features
+  const mainNavItems = [
     {
       target: '/chat',
       label: t('chat'),
       icon: MessageCircle,
     },
+    {
+      target: '/chat/cron',
+      label: t('cron'),
+      icon: AlarmClock,
+    },
+    {
+      target: '/chat/skills',
+      label: t('marketplaceFilterSkills'),
+      icon: BrainCircuit,
+    }
+  ];
+
+  const settingsNavItems = [
     {
       target: '/model',
       label: t('model'),
@@ -61,11 +81,6 @@ export function Sidebar() {
       label: t('sessions'),
       icon: History,
     },
-    {
-      target: '/cron',
-      label: t('cron'),
-      icon: AlarmClock,
-    },
     {
       target: '/secrets',
       label: t('secrets'),
@@ -75,28 +90,41 @@ export function Sidebar() {
       target: '/marketplace/plugins',
       label: t('marketplaceFilterPlugins'),
       icon: Plug,
-    },
-    {
-      target: '/marketplace/skills',
-      label: t('marketplaceFilterSkills'),
-      icon: BrainCircuit,
     }
   ];
+  const navItems = mode === 'main' ? mainNavItems : settingsNavItems;
 
   return (
     <aside className="w-[240px] shrink-0 flex flex-col h-full py-6 px-4 bg-secondary">
-      {/* Logo Area */}
-      <div className="px-2 mb-8">
-        <div className="flex items-center gap-2.5 cursor-pointer">
-          <div className="h-7 w-7 rounded-lg overflow-hidden flex items-center justify-center">
-            <img src="/logo.svg" alt="NextClaw" className="h-full w-full object-contain" />
+      {mode === 'settings' ? (
+        <div className="px-2 mb-6">
+          <NavLink
+            to="/chat"
+            className="group inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900"
+          >
+            <ArrowLeft className="h-3.5 w-3.5 text-gray-500 group-hover:text-gray-800" />
+            <span>{t('backToMain')}</span>
+          </NavLink>
+          <div className="mt-5 px-1">
+            <div className="flex items-center gap-2.5">
+              <Settings className="h-5 w-5 text-gray-700" />
+              <h1 className="text-[28px] leading-none font-semibold tracking-[-0.02em] text-gray-900">{t('settings')}</h1>
+            </div>
           </div>
-          <span className="text-[15px] font-semibold text-gray-800 tracking-[-0.01em]">NextClaw</span>
         </div>
-      </div>
+      ) : (
+        <div className="px-2 mb-8">
+          <div className="flex items-center gap-2.5 cursor-pointer">
+            <div className="h-7 w-7 rounded-lg overflow-hidden flex items-center justify-center">
+              <img src="/logo.svg" alt="NextClaw" className="h-full w-full object-contain" />
+            </div>
+            <span className="text-[15px] font-semibold text-gray-800 tracking-[-0.01em]">NextClaw</span>
+          </div>
+        </div>
+      )}
 
       {/* Navigation */}
-      <nav className="flex-1">
+      <nav className="flex-1 flex flex-col">
         <ul className="space-y-1">
           {navItems.map((item) => {
             const Icon = item.icon;
@@ -123,13 +151,33 @@ export function Sidebar() {
                   )}
                 </NavLink>
               </li>
-            );
-          })}
-        </ul>
+              );
+            })}
+          </ul>
       </nav>
 
       {/* Help Button */}
       <div className="pt-3 border-t border-[#dde0ea] mt-3">
+        {mode === 'main' && (
+          <div className="mb-2">
+            <NavLink
+              to="/settings"
+              className={({ isActive }) => cn(
+                'group w-full flex items-center gap-3 px-3 py-2.5 rounded-xl 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>
+          </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 shadow-none px-3 py-2.5 text-[14px] font-medium text-gray-600 hover:bg-[#e4e7ef] focus:ring-0">

package/src/components/marketplace/MarketplacePage.tsx

@@ -50,6 +50,9 @@ type InstalledRenderEntry = {
 };
 
 type MarketplaceRouteType = 'plugins' | 'skills';
+type MarketplacePageProps = {
+  forcedType?: MarketplaceRouteType;
+};
 
 function normalizeMarketplaceKey(value: string | undefined): string {
   return (value ?? '').trim().toLowerCase();
@@ -506,24 +509,31 @@ function PaginationBar(props: {
   );
 }
 
-export function MarketplacePage() {
+export function MarketplacePage(props: MarketplacePageProps = {}) {
   const navigate = useNavigate();
   const params = useParams<{ type?: string }>();
   const { language } = useI18n();
   const docBrowser = useDocBrowser();
+  const forcedType = props.forcedType;
 
   const routeType: MarketplaceRouteType | null = useMemo(() => {
+    if (forcedType === 'plugins' || forcedType === 'skills') {
+      return forcedType;
+    }
     if (params.type === 'plugins' || params.type === 'skills') {
       return params.type;
     }
     return null;
-  }, [params.type]);
+  }, [forcedType, params.type]);
 
   useEffect(() => {
+    if (forcedType) {
+      return;
+    }
     if (!routeType) {
       navigate('/marketplace/plugins', { replace: true });
     }
-  }, [routeType, navigate]);
+  }, [forcedType, routeType, navigate]);
 
   const typeFilter: MarketplaceItemType = routeType === 'skills' ? 'skill' : 'plugin';
   const localeFallbacks = useMemo(() => buildLocaleFallbacks(language), [language]);

package/src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, sideOffset = 8, align = 'start', ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      align={align}
+      className={cn(
+        'z-[var(--z-popover,50)] w-72 overflow-hidden rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/hooks/useConfig.ts

@@ -17,6 +17,7 @@ import {
   updateSession,
   deleteSession,
   sendChatTurn,
+  fetchChatCapabilities,
   fetchCronJobs,
   deleteCronJob,
   setCronJobEnabled,
@@ -242,6 +243,23 @@ export function useSendChatTurn() {
   });
 }
 
+export function useChatCapabilities(params?: { sessionKey?: string | null; agentId?: string | null }) {
+  const sessionKey = params?.sessionKey?.trim() || undefined;
+  const agentId = params?.agentId?.trim() || undefined;
+  return useQuery({
+    queryKey: ['chat-capabilities', sessionKey ?? null, agentId ?? null],
+    queryFn: async () => {
+      try {
+        return await fetchChatCapabilities({ sessionKey, agentId });
+      } catch {
+        return { stopSupported: false };
+      }
+    },
+    staleTime: 10_000,
+    retry: false
+  });
+}
+
 export function useCronJobs(params: { all?: boolean } = { all: true }) {
   return useQuery({
     queryKey: ['cron', params],

package/src/lib/i18n.ts

@@ -131,6 +131,9 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   secrets: { zh: '密钥管理', en: 'Secrets' },
   runtime: { zh: '路由与运行时', en: 'Routing & Runtime' },
   marketplace: { zh: '市场', en: 'Marketplace' },
+  advanced: { zh: '高级', en: 'Advanced' },
+  settings: { zh: '设置', en: 'Settings' },
+  backToMain: { zh: '返回主界面', en: 'Back to Main' },
 
   // Common
   enabled: { zh: '启用', en: 'Enabled' },
@@ -359,6 +362,8 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   dmScopeHelp: { zh: '控制私聊会话如何隔离。', en: 'Control how direct-message sessions are isolated.' },
   defaultContextTokens: { zh: '默认上下文 Token', en: 'Default Context Tokens' },
   defaultContextTokensHelp: { zh: '当 Agent 未设置单独值时使用该上下文预算。', en: 'Input context budget for agents when no per-agent override is set.' },
+  defaultEngine: { zh: '默认引擎', en: 'Default Engine' },
+  defaultEngineHelp: { zh: '默认使用的 Agent 引擎类型，例如 native 或 codex-sdk。', en: 'Default agent engine kind, for example native or codex-sdk.' },
   maxPingPongTurns: { zh: '最大乒乓轮次', en: 'Max Ping-Pong Turns' },
   maxPingPongTurnsHelp: { zh: '设为 0 可阻止 Agent 间自动 ping-pong。', en: 'Set to 0 to block automatic agent-to-agent ping-pong loops.' },
   agentList: { zh: 'Agent 列表', en: 'Agent List' },
@@ -374,6 +379,8 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   agentIdPlaceholder: { zh: 'Agent ID（例如 engineer）', en: 'Agent ID (e.g. engineer)' },
   workspaceOverridePlaceholder: { zh: '工作空间覆盖（可选）', en: 'Workspace override (optional)' },
   modelOverridePlaceholder: { zh: '模型覆盖（可选）', en: 'Model override (optional)' },
+  defaultEnginePlaceholder: { zh: '默认引擎（如 native 或 codex-sdk）', en: 'Default engine (e.g. native or codex-sdk)' },
+  engineOverridePlaceholder: { zh: '引擎覆盖（可选）', en: 'Engine override (optional)' },
   contextTokensPlaceholder: { zh: '上下文 tokens', en: 'Context tokens' },
   maxToolsPlaceholder: { zh: '最大工具次数', en: 'Max tools' },
   defaultAgent: { zh: '默认 Agent', en: 'Default agent' },
@@ -478,6 +485,9 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   chatSearchSessionPlaceholder: { zh: '搜索会话 key / 标签', en: 'Search session key / label' },
   chatAgentLabel: { zh: '目标 Agent', en: 'Target Agent' },
   chatSelectAgent: { zh: '选择 Agent', en: 'Select Agent' },
+  chatModelLabel: { zh: '对话模型', en: 'Chat Model' },
+  chatSelectModel: { zh: '选择模型', en: 'Select model' },
+  chatModelNoOptions: { zh: '暂无可用模型，请先配置 Provider。', en: 'No available models. Configure a provider first.' },
   chatSessionLabel: { zh: '当前会话', en: 'Current Session' },
   chatNoSession: { zh: '未选择会话', en: 'No session selected' },
   chatNoSessionHint: { zh: '创建一个会话并发送第一条消息。', en: 'Create a session and send your first message.' },
@@ -487,6 +497,9 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   chatInputPlaceholder: { zh: '输入消息，Enter 发送，Shift + Enter 换行', en: 'Type a message, Enter to send, Shift + Enter for newline' },
   chatInputHint: { zh: '支持多轮上下文，默认走当前会话。', en: 'Multi-turn context is preserved in the current session.' },
   chatSend: { zh: '发送', en: 'Send' },
+  chatStop: { zh: '停止', en: 'Stop' },
+  chatStopPreparing: { zh: '正在建立可停止会话，请稍候…', en: 'Preparing stoppable run…' },
+  chatStopUnavailable: { zh: '当前后端引擎不支持手动停止。', en: 'Manual stop is not supported by the current backend engine.' },
   chatSending: { zh: '发送中...', en: 'Sending...' },
   chatQueueSend: { zh: '排队发送', en: 'Queue' },
   chatQueuedHintPrefix: { zh: '当前有', en: 'Queued' },
@@ -501,10 +514,45 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   chatRoleMessage: { zh: '消息', en: 'Message' },
   chatToolCall: { zh: '工具调用', en: 'Tool Call' },
   chatToolResult: { zh: '工具结果', en: 'Tool Result' },
+  chatToolWorkflow: { zh: '工具工作流', en: 'Tool Workflow' },
+  chatToolWorkflowDetails: { zh: '展开查看参数和结果', en: 'Expand to view params and results' },
   chatToolOutput: { zh: '查看输出', en: 'View Output' },
   chatToolNoOutput: { zh: '无输出（执行完成）', en: 'No output (completed)' },
   chatReasoning: { zh: '查看推理内容', en: 'Show reasoning' },
 
+  // Chat Sidebar (unified)
+  chatSidebarNewTask: { zh: '新任务', en: 'New Task' },
+  chatSidebarSearchPlaceholder: { zh: '搜索对话...', en: 'Search conversations...' },
+  chatSidebarScheduledTasks: { zh: '定时任务', en: 'Scheduled Tasks' },
+  chatSidebarSkills: { zh: '技能', en: 'Skills' },
+  chatSidebarTaskRecords: { zh: '会话记录', en: 'Sessions' },
+  chatSidebarToday: { zh: '今天', en: 'Today' },
+  chatSidebarYesterday: { zh: '昨天', en: 'Yesterday' },
+  chatSidebarPrevious7Days: { zh: '近 7 天', en: 'Previous 7 Days' },
+  chatSidebarOlder: { zh: '更早', en: 'Older' },
+
+  // Welcome page
+  chatWelcomeTitle: { zh: '你好，有什么可以帮你的吗？', en: 'Hello, how can I help you?' },
+  chatWelcomeSubtitle: { zh: '开始一个新任务或选择已有对话', en: 'Start a new task or select an existing conversation' },
+  chatWelcomeCapability1Title: { zh: '智能对话', en: 'Smart Conversations' },
+  chatWelcomeCapability1Desc: { zh: '多轮上下文对话，支持多种 AI 模型', en: 'Multi-turn context conversations with multiple AI models' },
+  chatWelcomeCapability2Title: { zh: '技能扩展', en: 'Skill Extensions' },
+  chatWelcomeCapability2Desc: { zh: '通过安装技能扩展 Agent 能力', en: 'Extend Agent capabilities by installing skills' },
+  chatWelcomeCapability3Title: { zh: '定时任务', en: 'Scheduled Tasks' },
+  chatWelcomeCapability3Desc: { zh: '设置定时执行的自动化任务', en: 'Set up scheduled automated tasks' },
+
+  // Skills picker
+  chatSkillsPickerTitle: { zh: '技能', en: 'Skills' },
+  chatSkillsPickerEmpty: { zh: '暂无已安装技能', en: 'No skills installed' },
+  chatSkillsPickerSearchPlaceholder: { zh: '搜索技能', en: 'Search skills' },
+  chatSkillsPickerNoDescription: { zh: '暂无描述', en: 'No description' },
+  chatSkillsPickerOfficial: { zh: '官方', en: 'Official' },
+  chatSkillsPickerManage: { zh: '管理技能', en: 'Manage Skills' },
+
+  // Input bar
+  chatInputAttach: { zh: '添加附件', en: 'Attach file' },
+  chatInputAttachComingSoon: { zh: '即将支持', en: 'Coming soon' },
+
   // Cron
   cronPageTitle: { zh: '定时任务', en: 'Cron Jobs' },
   cronPageDescription: { zh: '查看与删除定时任务，关注执行时间与状态。', en: 'View and delete cron jobs, track schedule and status.' },

package/src/lib/provider-models.ts

@@ -0,0 +1,129 @@
+import type { ConfigMetaView, ConfigView, ProviderConfigView } from '@/api/types';
+
+export type ProviderModelCatalogItem = {
+  name: string;
+  displayName: string;
+  prefix: string;
+  aliases: string[];
+  models: string[];
+  configured: boolean;
+};
+
+export function normalizeStringList(input: string[] | null | undefined): string[] {
+  if (!input || input.length === 0) {
+    return [];
+  }
+  const deduped = new Set<string>();
+  for (const item of input) {
+    const trimmed = item.trim();
+    if (trimmed) {
+      deduped.add(trimmed);
+    }
+  }
+  return [...deduped];
+}
+
+export function stripProviderPrefix(model: string, prefix: string): string {
+  const trimmed = model.trim();
+  const cleanPrefix = prefix.trim();
+  if (!trimmed || !cleanPrefix) {
+    return trimmed;
+  }
+  const withSlash = `${cleanPrefix}/`;
+  if (trimmed.startsWith(withSlash)) {
+    return trimmed.slice(withSlash.length);
+  }
+  return trimmed;
+}
+
+export function toProviderLocalModel(model: string, aliases: string[]): string {
+  let normalized = model.trim();
+  if (!normalized) {
+    return '';
+  }
+  for (const alias of aliases) {
+    normalized = stripProviderPrefix(normalized, alias);
+  }
+  return normalized.trim();
+}
+
+export function composeProviderModel(prefix: string, localModel: string): string {
+  const normalizedModel = localModel.trim();
+  const normalizedPrefix = prefix.trim();
+  if (!normalizedModel) {
+    return '';
+  }
+  if (!normalizedPrefix) {
+    return normalizedModel;
+  }
+  return `${normalizedPrefix}/${normalizedModel}`;
+}
+
+export function findProviderByModel(
+  model: string,
+  providerCatalog: Array<{ name: string; aliases: string[] }>
+): string | null {
+  const trimmed = model.trim();
+  if (!trimmed) {
+    return null;
+  }
+  let bestMatch: { name: string; score: number } | null = null;
+  for (const provider of providerCatalog) {
+    for (const alias of provider.aliases) {
+      const cleanAlias = alias.trim();
+      if (!cleanAlias) {
+        continue;
+      }
+      if (trimmed === cleanAlias || trimmed.startsWith(`${cleanAlias}/`)) {
+        if (!bestMatch || cleanAlias.length > bestMatch.score) {
+          bestMatch = { name: provider.name, score: cleanAlias.length };
+        }
+      }
+    }
+  }
+  return bestMatch?.name ?? null;
+}
+
+function isProviderConfigured(provider: ProviderConfigView | undefined): boolean {
+  if (!provider) {
+    return false;
+  }
+  // Keep in sync with ProvidersList "已配置" tab: only apiKeySet counts as configured.
+  return provider.apiKeySet === true;
+}
+
+export function buildProviderModelCatalog(params: {
+  meta?: ConfigMetaView;
+  config?: ConfigView;
+  onlyConfigured?: boolean;
+}): ProviderModelCatalogItem[] {
+  const { meta, config, onlyConfigured = false } = params;
+
+  const catalog = (meta?.providers ?? []).map((spec) => {
+    const providerConfig = config?.providers?.[spec.name];
+    const prefix = (spec.modelPrefix || spec.name || '').trim();
+    const aliases = normalizeStringList([spec.modelPrefix || '', spec.name || '']);
+    const defaultModels = normalizeStringList((spec.defaultModels ?? []).map((model) => toProviderLocalModel(model, aliases)));
+    const customModels = normalizeStringList(
+      (providerConfig?.models ?? []).map((model) => toProviderLocalModel(model, aliases))
+    );
+    const models = normalizeStringList([...defaultModels, ...customModels]);
+    const configDisplayName = providerConfig?.displayName?.trim();
+    const configured = isProviderConfigured(providerConfig);
+
+    return {
+      name: spec.name,
+      displayName: configDisplayName || spec.displayName || spec.name,
+      prefix,
+      aliases,
+      models,
+      configured
+    } satisfies ProviderModelCatalogItem;
+  });
+
+  if (!onlyConfigured) {
+    return catalog;
+  }
+
+  return catalog.filter((provider) => provider.configured && provider.models.length > 0);
+}