@nextclaw/ui 0.5.48 → 0.6.1

package/src/components/chat/ChatSidebar.tsx

@@ -0,0 +1,242 @@
+import { useMemo } from 'react';
+import type { SessionEntryView } from '@/api/types';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { LANGUAGE_OPTIONS, formatDateTime, t, type I18nLanguage } from '@/lib/i18n';
+import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
+import { useI18n } from '@/components/providers/I18nProvider';
+import { useTheme } from '@/components/providers/ThemeProvider';
+import { NavLink } from 'react-router-dom';
+import { AlarmClock, BrainCircuit, Languages, MessageSquareText, Palette, Plus, Search, Settings } from 'lucide-react';
+
+type ChatSidebarProps = {
+  sessions: SessionEntryView[];
+  selectedSessionKey: string | null;
+  onSelectSession: (key: string) => void;
+  onCreateSession: () => void;
+  sessionTitle: (session: SessionEntryView) => string;
+  isLoading: boolean;
+  query: string;
+  onQueryChange: (value: string) => void;
+};
+
+type DateGroup = {
+  label: string;
+  sessions: SessionEntryView[];
+};
+
+function groupSessionsByDate(sessions: SessionEntryView[]): DateGroup[] {
+  const now = new Date();
+  const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const yesterdayStart = todayStart - 86_400_000;
+  const sevenDaysStart = todayStart - 7 * 86_400_000;
+
+  const today: SessionEntryView[] = [];
+  const yesterday: SessionEntryView[] = [];
+  const previous7: SessionEntryView[] = [];
+  const older: SessionEntryView[] = [];
+
+  for (const session of sessions) {
+    const ts = new Date(session.updatedAt).getTime();
+    if (ts >= todayStart) {
+      today.push(session);
+    } else if (ts >= yesterdayStart) {
+      yesterday.push(session);
+    } else if (ts >= sevenDaysStart) {
+      previous7.push(session);
+    } else {
+      older.push(session);
+    }
+  }
+
+  const groups: DateGroup[] = [];
+  if (today.length > 0) groups.push({ label: t('chatSidebarToday'), sessions: today });
+  if (yesterday.length > 0) groups.push({ label: t('chatSidebarYesterday'), sessions: yesterday });
+  if (previous7.length > 0) groups.push({ label: t('chatSidebarPrevious7Days'), sessions: previous7 });
+  if (older.length > 0) groups.push({ label: t('chatSidebarOlder'), sessions: older });
+  return groups;
+}
+
+const navItems = [
+  { target: '/cron', label: () => t('chatSidebarScheduledTasks'), icon: AlarmClock },
+  { target: '/skills', label: () => t('chatSidebarSkills'), icon: BrainCircuit },
+];
+
+export function ChatSidebar(props: ChatSidebarProps) {
+  const { language, setLanguage } = useI18n();
+  const { theme, setTheme } = useTheme();
+  const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
+  const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
+
+  const groups = useMemo(() => groupSessionsByDate(props.sessions), [props.sessions]);
+
+  const handleLanguageSwitch = (nextLang: I18nLanguage) => {
+    if (language === nextLang) return;
+    setLanguage(nextLang);
+    window.location.reload();
+  };
+
+  return (
+    <aside className="w-[280px] shrink-0 flex flex-col h-full bg-secondary border-r border-gray-200/60">
+      {/* Logo */}
+      <div className="px-5 pt-5 pb-3">
+        <div className="flex items-center gap-2.5">
+          <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>
+
+      {/* New Task button */}
+      <div className="px-4 pb-3">
+        <Button variant="primary" className="w-full rounded-xl" onClick={props.onCreateSession}>
+          <Plus className="h-4 w-4 mr-2" />
+          {t('chatSidebarNewTask')}
+        </Button>
+      </div>
+
+      {/* Search */}
+      <div className="px-4 pb-3">
+        <div className="relative">
+          <Search className="h-3.5 w-3.5 absolute left-3 top-2.5 text-gray-400" />
+          <Input
+            value={props.query}
+            onChange={(e) => props.onQueryChange(e.target.value)}
+            placeholder={t('chatSidebarSearchPlaceholder')}
+            className="pl-8 h-9 rounded-lg text-xs"
+          />
+        </div>
+      </div>
+
+      {/* Navigation shortcuts */}
+      <div className="px-3 pb-2">
+        <ul className="space-y-0.5">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            return (
+              <li key={item.target}>
+                <NavLink
+                  to={item.target}
+                  className={({ isActive }) => cn(
+                    'group w-full flex items-center gap-3 px-3 py-2 rounded-xl text-[13px] font-medium transition-all duration-150',
+                    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-4 w-4 transition-colors',
+                        isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
+                      )} />
+                      <span>{item.label()}</span>
+                    </>
+                  )}
+                </NavLink>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+
+      {/* Divider */}
+      <div className="mx-4 border-t border-gray-200/60" />
+
+      {/* Session history */}
+      <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
+        {props.isLoading ? (
+          <div className="text-xs text-gray-500 p-3">{t('sessionsLoading')}</div>
+        ) : groups.length === 0 ? (
+          <div className="p-4 text-center">
+            <MessageSquareText className="h-6 w-6 mx-auto mb-2 text-gray-300" />
+            <div className="text-xs text-gray-500">{t('sessionsEmpty')}</div>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {groups.map((group) => (
+              <div key={group.label}>
+                <div className="px-2 py-1 text-[11px] font-medium text-gray-400 uppercase tracking-wider">
+                  {group.label}
+                </div>
+                <div className="space-y-0.5">
+                  {group.sessions.map((session) => {
+                    const active = props.selectedSessionKey === session.key;
+                    return (
+                      <button
+                        key={session.key}
+                        onClick={() => props.onSelectSession(session.key)}
+                        className={cn(
+                          'w-full rounded-xl px-3 py-2 text-left transition-all text-[13px]',
+                          active
+                            ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
+                            : 'text-gray-700 hover:bg-gray-200/60 hover:text-gray-900'
+                        )}
+                      >
+                        <div className="truncate font-medium">{props.sessionTitle(session)}</div>
+                        <div className="mt-0.5 text-[11px] text-gray-400 truncate">
+                          {session.messageCount} · {formatDateTime(session.updatedAt)}
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Settings footer */}
+      <div className="px-3 py-3 border-t border-gray-200/60 space-y-0.5">
+        <NavLink
+          to="/settings"
+          className={({ isActive }) => cn(
+            'group w-full flex items-center gap-2.5 px-3 py-2 rounded-xl text-[13px] font-medium transition-all duration-150',
+            isActive
+              ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
+              : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
+          )}
+        >
+          {({ isActive }) => (
+            <>
+              <Settings className={cn('h-4 w-4 transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
+              <span>{t('settings')}</span>
+            </>
+          )}
+        </NavLink>
+        <Select value={theme} onValueChange={(v) => setTheme(v as UiTheme)}>
+          <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2 text-[13px] font-medium text-gray-600 hover:bg-gray-200/60 focus:ring-0">
+            <div className="flex items-center gap-2.5 min-w-0">
+              <Palette className="h-4 w-4 text-gray-400" />
+              <span>{t('theme')}</span>
+            </div>
+            <span className="ml-auto text-[11px] text-gray-500">{currentThemeLabel}</span>
+          </SelectTrigger>
+          <SelectContent>
+            {THEME_OPTIONS.map((o) => (
+              <SelectItem key={o.value} value={o.value} className="text-xs">{t(o.labelKey)}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Select value={language} onValueChange={(v) => handleLanguageSwitch(v as I18nLanguage)}>
+          <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2 text-[13px] font-medium text-gray-600 hover:bg-gray-200/60 focus:ring-0">
+            <div className="flex items-center gap-2.5 min-w-0">
+              <Languages className="h-4 w-4 text-gray-400" />
+              <span>{t('language')}</span>
+            </div>
+            <span className="ml-auto text-[11px] text-gray-500">{currentLanguageLabel}</span>
+          </SelectTrigger>
+          <SelectContent>
+            {LANGUAGE_OPTIONS.map((o) => (
+              <SelectItem key={o.value} value={o.value} className="text-xs">{o.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </aside>
+  );
+}

package/src/components/chat/ChatThread.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import type { SessionEventView, SessionMessageView } from '@/api/types';
 import { cn } from '@/lib/utils';
 import {
@@ -25,6 +25,10 @@ type ChatThreadProps = {
 const MARKDOWN_MAX_CHARS = 140_000;
 const TOOL_OUTPUT_PREVIEW_MAX = 220;
 
+type WorkflowToolCard = ToolCard & {
+  _workflowStep?: number;
+};
+
 function trimMarkdown(value: string): string {
   if (value.length <= MARKDOWN_MAX_CHARS) {
     return value;
@@ -104,7 +108,7 @@ function MarkdownBlock({ text, role }: { text: string; role: ChatRole }) {
   );
 }
 
-function ToolCardView({ card }: { card: ToolCard }) {
+function ToolCardView({ card }: { card: WorkflowToolCard }) {
   const title = card.kind === 'call' ? t('chatToolCall') : t('chatToolResult');
   const output = card.text?.trim() ?? '';
   const showDetails = output.length > TOOL_OUTPUT_PREVIEW_MAX || output.includes('\n');
@@ -113,9 +117,12 @@ function ToolCardView({ card }: { card: ToolCard }) {
 
   return (
     <div className="rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5">
-      <div className="flex items-center gap-2 text-xs text-amber-800 font-semibold">
+      <div className="flex flex-wrap items-center gap-2 text-xs text-amber-800 font-semibold">
         {renderToolIcon(card.name)}
         <span>{title}</span>
+        {typeof card._workflowStep === 'number' && (
+          <span className="rounded-md bg-amber-100 px-1.5 py-0.5 text-[10px] text-amber-700">#{card._workflowStep + 1}</span>
+        )}
         <span className="font-mono text-[11px] text-amber-900/80">{card.name}</span>
       </div>
       {card.detail && (
@@ -143,6 +150,35 @@ function ToolCardView({ card }: { card: ToolCard }) {
   );
 }
 
+function ToolWorkflowCard({ cards }: { cards: WorkflowToolCard[] }) {
+  const chain = cards
+    .map((card) => card.name.trim())
+    .filter((name) => name.length > 0)
+    .join(' \u2192 ');
+
+  return (
+    <details className="rounded-xl border border-amber-200/80 bg-amber-50/50 p-3">
+      <summary className="cursor-pointer list-none">
+        <div className="flex flex-wrap items-center gap-2 text-xs text-amber-800 font-semibold">
+          <Wrench className="h-3.5 w-3.5" />
+          <span>{t('chatToolWorkflow')}</span>
+          <span className="font-mono text-[11px] text-amber-900/90">{chain || 'tool'}</span>
+          <span className="rounded-md bg-amber-100 px-1.5 py-0.5 text-[10px] text-amber-700">{cards.length}</span>
+          <span className="text-[11px] font-normal text-amber-700/90">{t('chatToolWorkflowDetails')}</span>
+        </div>
+      </summary>
+      <div className="mt-3 space-y-2">
+        {cards.map((card, index) => (
+          <ToolCardView
+            key={`${card.kind}-${card.callId ?? card.name}-${index}`}
+            card={{ ...card, _workflowStep: index }}
+          />
+        ))}
+      </div>
+    </details>
+  );
+}
+
 function ReasoningBlock({ reasoning, isUser }: { reasoning: string; isUser: boolean }) {
   return (
     <details className="mt-3">
@@ -179,9 +215,16 @@ function MessageCard({ message }: { message: SessionMessageView }) {
       {primaryReasoning && <ReasoningBlock reasoning={primaryReasoning} isUser={isUser} />}
       {toolCards.length > 0 && (
         <div className={cn('space-y-2', (shouldRenderPrimaryText || primaryReasoning) && 'mt-3')}>
-          {toolCards.map((card, index) => (
-            <ToolCardView key={`${card.kind}-${card.name}-${card.callId ?? index}`} card={card} />
-          ))}
+          {toolCards.length > 1 ? (
+            <ToolWorkflowCard cards={toolCards} />
+          ) : (
+            toolCards.map((card, index) => (
+              <ToolCardView
+                key={`${card.kind}-${card.name}-${card.callId ?? index}`}
+                card={{ ...card }}
+              />
+            ))
+          )}
         </div>
       )}
     </div>
@@ -189,26 +232,50 @@ function MessageCard({ message }: { message: SessionMessageView }) {
 }
 
 function AssistantTurnCard({ item }: { item: ChatTimelineAssistantTurnItem }) {
+  const renderedSegments: ReactNode[] = [];
+  let index = 0;
+  while (index < item.segments.length) {
+    const segment = item.segments[index];
+    if (!segment) {
+      index += 1;
+      continue;
+    }
+    if (segment.kind === 'assistant_message') {
+      const hasText = Boolean(segment.text);
+      const hasReasoning = Boolean(segment.reasoning);
+      if (hasText || hasReasoning) {
+        renderedSegments.push(
+          <div key={`${segment.key}-${index}`}>
+            {hasText && <MarkdownBlock text={segment.text} role="assistant" />}
+            {hasReasoning && <ReasoningBlock reasoning={segment.reasoning} isUser={false} />}
+          </div>
+        );
+      }
+      index += 1;
+      continue;
+    }
+
+    const groupedCards: WorkflowToolCard[] = [];
+    let cursor = index;
+    while (cursor < item.segments.length) {
+      const current = item.segments[cursor];
+      if (!current || current.kind !== 'tool_card') {
+        break;
+      }
+      groupedCards.push(current.card);
+      cursor += 1;
+    }
+    if (groupedCards.length > 1) {
+      renderedSegments.push(<ToolWorkflowCard key={`workflow-${segment.key}-${index}`} cards={groupedCards} />);
+    } else if (groupedCards.length === 1) {
+      renderedSegments.push(<ToolCardView key={`${segment.key}-${index}`} card={groupedCards[0]} />);
+    }
+    index = cursor;
+  }
+
   return (
     <div className="rounded-2xl border px-4 py-3 shadow-sm bg-white text-gray-900 border-gray-200">
-      <div className="space-y-3">
-        {item.segments.map((segment, index) => {
-          if (segment.kind === 'assistant_message') {
-            const hasText = Boolean(segment.text);
-            const hasReasoning = Boolean(segment.reasoning);
-            if (!hasText && !hasReasoning) {
-              return null;
-            }
-            return (
-              <div key={`${segment.key}-${index}`}>
-                {hasText && <MarkdownBlock text={segment.text} role="assistant" />}
-                {hasReasoning && <ReasoningBlock reasoning={segment.reasoning} isUser={false} />}
-              </div>
-            );
-          }
-          return <ToolCardView key={`${segment.key}-${index}`} card={segment.card} />;
-        })}
-      </div>
+      <div className="space-y-3">{renderedSegments}</div>
     </div>
   );
 }
@@ -224,7 +291,7 @@ export function ChatThread({ events, isSending, className }: ChatThreadProps) {
         return (
           <div key={item.key} className={cn('flex gap-3', isUser ? 'justify-end' : 'justify-start')}>
             {!isUser && <RoleAvatar role={role} />}
-            <div className={cn('max-w-[88%] min-w-[280px] space-y-2', isUser && 'flex flex-col items-end')}>
+            <div className={cn('max-w-[92%] min-w-[280px] space-y-2', isUser && 'flex flex-col items-end')}>
               {item.kind === 'assistant_turn' ? (
                 <AssistantTurnCard item={item} />
               ) : (

package/src/components/chat/ChatWelcome.tsx

@@ -0,0 +1,61 @@
+import { t } from '@/lib/i18n';
+import { Bot, BrainCircuit, AlarmClock, MessageCircle } from 'lucide-react';
+
+type ChatWelcomeProps = {
+  onCreateSession: () => void;
+};
+
+const capabilities = [
+  {
+    icon: MessageCircle,
+    titleKey: 'chatWelcomeCapability1Title' as const,
+    descKey: 'chatWelcomeCapability1Desc' as const,
+  },
+  {
+    icon: BrainCircuit,
+    titleKey: 'chatWelcomeCapability2Title' as const,
+    descKey: 'chatWelcomeCapability2Desc' as const,
+  },
+  {
+    icon: AlarmClock,
+    titleKey: 'chatWelcomeCapability3Title' as const,
+    descKey: 'chatWelcomeCapability3Desc' as const,
+  },
+];
+
+export function ChatWelcome({ onCreateSession }: ChatWelcomeProps) {
+  return (
+    <div className="h-full flex items-center justify-center p-8">
+      <div className="max-w-lg w-full text-center">
+        {/* Bot avatar */}
+        <div className="mx-auto mb-6 h-16 w-16 rounded-2xl bg-primary/10 flex items-center justify-center">
+          <Bot className="h-8 w-8 text-primary" />
+        </div>
+
+        {/* Greeting */}
+        <h2 className="text-xl font-semibold text-gray-900 mb-2">{t('chatWelcomeTitle')}</h2>
+        <p className="text-sm text-gray-500 mb-8">{t('chatWelcomeSubtitle')}</p>
+
+        {/* Capability cards */}
+        <div className="grid grid-cols-3 gap-3">
+          {capabilities.map((cap) => {
+            const Icon = cap.icon;
+            return (
+              <button
+                key={cap.titleKey}
+                onClick={onCreateSession}
+                className="rounded-2xl border border-gray-200 bg-white p-4 text-left shadow-card hover:shadow-card-hover transition-shadow cursor-pointer"
+              >
+                <div className="h-9 w-9 rounded-xl bg-primary/8 flex items-center justify-center mb-3">
+                  <Icon className="h-4.5 w-4.5 text-primary" />
+                </div>
+                <div className="text-sm font-semibold text-gray-900 mb-1">{t(cap.titleKey)}</div>
+                <div className="text-[11px] text-gray-500 leading-relaxed">{t(cap.descKey)}</div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/chat/SkillsPicker.tsx

@@ -0,0 +1,137 @@
+import { useMemo, useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover';
+import { Input } from '@/components/ui/input';
+import { useI18n } from '@/components/providers/I18nProvider';
+import type { MarketplaceInstalledRecord } from '@/api/types';
+import { t } from '@/lib/i18n';
+import { BrainCircuit, Check, ExternalLink, Search, Puzzle } from 'lucide-react';
+
+type SkillsPickerProps = {
+  records: MarketplaceInstalledRecord[];
+  isLoading?: boolean;
+  selectedSkills: string[];
+  onSelectedSkillsChange: (next: string[]) => void;
+};
+
+export function SkillsPicker({ records, isLoading = false, selectedSkills, onSelectedSkillsChange }: SkillsPickerProps) {
+  const { language } = useI18n();
+  const [query, setQuery] = useState('');
+  const selectedSkillSet = useMemo(() => new Set(selectedSkills), [selectedSkills]);
+  const selectedCount = selectedSkills.length;
+  const filteredRecords = useMemo(() => {
+    const keyword = query.trim().toLowerCase();
+    if (!keyword) {
+      return records;
+    }
+    return records.filter((record) => {
+      const haystack = [record.label, record.spec, record.description, record.descriptionZh]
+        .filter((value): value is string => typeof value === 'string' && value.trim().length > 0)
+        .join(' ')
+        .toLowerCase();
+      return haystack.includes(keyword);
+    });
+  }, [query, records]);
+
+  const handleToggleSelection = (record: MarketplaceInstalledRecord) => {
+    const skillName = record.spec?.trim();
+    if (!skillName) {
+      return;
+    }
+    if (selectedSkillSet.has(skillName)) {
+      onSelectedSkillsChange(selectedSkills.filter((item) => item !== skillName));
+      return;
+    }
+    onSelectedSkillsChange([...selectedSkills, skillName]);
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors"
+        >
+          <BrainCircuit className="h-4 w-4" />
+          <span>{t('chatSkillsPickerTitle')}</span>
+          {selectedCount > 0 && (
+            <span className="ml-0.5 min-w-[18px] h-[18px] flex items-center justify-center rounded-full bg-primary/10 text-primary text-[10px] font-semibold">
+              {selectedCount}
+            </span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent side="top" align="start" className="w-[360px] p-0">
+        <div className="space-y-2 border-b border-gray-100 px-4 py-3">
+          <div className="text-sm font-semibold text-gray-900">{t('chatSkillsPickerTitle')}</div>
+          <div className="relative">
+            <Search className="pointer-events-none absolute left-3 top-2.5 h-3.5 w-3.5 text-gray-400" />
+            <Input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder={t('chatSkillsPickerSearchPlaceholder')}
+              className="h-8 rounded-lg pl-8 text-xs"
+            />
+          </div>
+        </div>
+        <div className="max-h-[320px] overflow-y-auto custom-scrollbar">
+          {isLoading ? (
+            <div className="p-4 text-xs text-gray-500">{t('sessionsLoading')}</div>
+          ) : filteredRecords.length === 0 ? (
+            <div className="p-4 text-xs text-gray-500 text-center">{t('chatSkillsPickerEmpty')}</div>
+          ) : (
+            <div className="py-1">
+              {filteredRecords.map((record) => (
+                <button
+                  key={record.spec}
+                  type="button"
+                  onClick={() => handleToggleSelection(record)}
+                  className="flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-gray-50"
+                >
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500">
+                    <Puzzle className="h-4 w-4" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-1.5">
+                      <span className="truncate text-sm text-gray-900">{record.label || record.spec}</span>
+                      {record.origin === 'builtin' && (
+                        <span className="shrink-0 text-[10px] bg-primary/10 text-primary px-1.5 py-0.5 rounded-full font-medium">
+                          {t('chatSkillsPickerOfficial')}
+                        </span>
+                      )}
+                    </div>
+                    <div className="mt-0.5 truncate text-xs text-gray-500">
+                      {(language === 'zh' ? record.descriptionZh : record.description)?.trim() ||
+                        record.description?.trim() ||
+                        t('chatSkillsPickerNoDescription')}
+                    </div>
+                  </div>
+                  <div className="ml-3 shrink-0">
+                    <span
+                      className={
+                        selectedSkillSet.has(record.spec)
+                          ? 'inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white'
+                          : 'inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white'
+                      }
+                    >
+                      {selectedSkillSet.has(record.spec) && <Check className="h-3 w-3" />}
+                    </span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="px-4 py-2.5 border-t border-gray-100">
+          <NavLink
+            to="/marketplace/skills"
+            className="inline-flex items-center gap-1.5 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
+          >
+            {t('chatSkillsPickerManage')}
+            <ExternalLink className="h-3 w-3" />
+          </NavLink>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}