feat(skills-hub): add category browsing and bulk selection

Add ClawHub-style category navigation to the Skills Hub. Since the public
ClawHub API returns no category data, classify skills locally by keyword
against topics/name/summary into the 14 upstream categories.

- Store and Installed tabs gain a category chip row with live counts;
  each card shows its primary-category icon and clickable category badges.
- Preserve and surface the previously-dropped `topics` field on cards.
- Store tab auto-fetches more pages when a category filter yields a sparse
  page, so local filtering over cursor pagination stays populated.
- Add a bulk-select mode (Installed + Import tabs only) with click-to-toggle
  and Shift+click range selection, an undo toast, and protection for the
  always-on skills-creator/skills-installer skills.

Icons reuse the project's ~icons/lucide pipeline; copy is fully i18n'd.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: 24baigei

crates/agent-gui/src/components/icons.tsx

@@ -3,6 +3,7 @@ import McpLogoSource from "~icons/gravity-ui/logo-mcp";
 import ConnectionIconSource from "~icons/gravity-ui/plug-connection";
 import ClaudeSource from "~icons/logos/claude-icon";
 import OpenAISource from "~icons/logos/openai-icon";
+import ActivitySource from "~icons/lucide/activity";
 import ArchiveSource from "~icons/lucide/archive";
 import ArchiveRestoreSource from "~icons/lucide/archive-restore";
 import ArrowLeftSource from "~icons/lucide/arrow-left";
@@ -48,10 +49,12 @@ import GlobeSource from "~icons/lucide/globe";
 import GlobeOffSource from "~icons/lucide/globe-off";
 import GripVerticalSource from "~icons/lucide/grip-vertical";
 import HistorySource from "~icons/lucide/history";
+import HouseSource from "~icons/lucide/house";
 import ImageIconSource from "~icons/lucide/image";
 import ImageOffSource from "~icons/lucide/image-off";
 import InfoSource from "~icons/lucide/info";
 import KeySource from "~icons/lucide/key";
+import LayersSource from "~icons/lucide/layers";
 import LayoutGridSource from "~icons/lucide/layout-grid";
 import LightbulbSource from "~icons/lucide/lightbulb";
 import LightbulbOffSource from "~icons/lucide/lightbulb-off";
@@ -63,12 +66,15 @@ import LoaderCircleSource from "~icons/lucide/loader-circle";
 import LockSource from "~icons/lucide/lock";
 import LogOutSource from "~icons/lucide/log-out";
 import Maximize2Source from "~icons/lucide/maximize-2";
+import MessageCircleSource from "~icons/lucide/message-circle";
 import MessageSquareSource from "~icons/lucide/message-square";
 import MessageSquareTextSource from "~icons/lucide/message-square-text";
 import Minimize2Source from "~icons/lucide/minimize-2";
 import MinusSource from "~icons/lucide/minus";
 import MonitorSmartphoneSource from "~icons/lucide/monitor-smartphone";
 import MoonSource from "~icons/lucide/moon";
+import PackageSource from "~icons/lucide/package";
+import PaletteSource from "~icons/lucide/palette";
 import PanelLeftSource from "~icons/lucide/panel-left";
 import PanelLeftCloseSource from "~icons/lucide/panel-left-close";
 import PanelRightCloseSource from "~icons/lucide/panel-right-close";
@@ -109,6 +115,7 @@ import Trash2Source from "~icons/lucide/trash-2";
 import AlertTriangleSource from "~icons/lucide/triangle-alert";
 import Undo2Source from "~icons/lucide/undo-2";
 import UploadSource from "~icons/lucide/upload";
+import WalletSource from "~icons/lucide/wallet";
 import WaypointsSource from "~icons/lucide/waypoints";
 import WifiSource from "~icons/lucide/wifi";
 import WifiOffSource from "~icons/lucide/wifi-off";
@@ -448,6 +455,7 @@ export const GeminiIcon = createIcon(GeminiIconSource);
 export const Archive = createIcon(ArchiveSource);
 export const ArchiveRestore = createIcon(ArchiveRestoreSource);
 export const ArrowLeft = createIcon(ArrowLeftSource);
+export const Activity = createIcon(ActivitySource);
 export const Ban = createIcon(BanSource);
 export const Blend = createIcon(BlendSource);
 export const BookOpen = createIcon(BookOpenSource);
@@ -489,10 +497,12 @@ export const GitCommitHorizontal = createIcon(GitCommitHorizontalSource);
 export const Github = createIcon(GithubSource);
 export const GripVertical = createIcon(GripVerticalSource);
 export const History = createIcon(HistorySource);
+export const House = createIcon(HouseSource);
 export const ImageIcon = createIcon(ImageIconSource);
 export const ImageOff = createIcon(ImageOffSource);
 export const Info = createIcon(InfoSource);
 export const Key = createIcon(KeySource);
+export const Layers = createIcon(LayersSource);
 export const LayoutGrid = createIcon(LayoutGridSource);
 export const Link2 = createIcon(Link2Source);
 export const Lightbulb = createIcon(LightbulbSource);
@@ -504,6 +514,7 @@ export const LoaderCircle = createIcon(LoaderCircleSource);
 export const Lock = createIcon(LockSource);
 export const LogOut = createIcon(LogOutSource);
 export const Maximize2 = createIcon(Maximize2Source);
+export const MessageCircle = createIcon(MessageCircleSource);
 export const MessageSquare = createIcon(MessageSquareSource);
 export const MessageSquareText = createIcon(MessageSquareTextSource);
 export const McpLogo = createIcon(McpLogoSource);
@@ -519,6 +530,8 @@ export const PanelRightClose = createIcon(PanelRightCloseSource);
 export const PanelRightOpen = createIcon(PanelRightOpenSource);
 export const Paperclip = createIcon(PaperclipSource);
 export const Pencil = createIcon(PencilSource);
+export const Package = createIcon(PackageSource);
+export const Palette = createIcon(PaletteSource);
 export const Pin = createIcon(PinSource);
 export const PinOff = createIcon(PinOffSource);
 export const Play = createIcon(PlaySource);
@@ -553,6 +566,7 @@ export const TextSelect = createIcon(TextSelectSource);
 export const Trash2 = createIcon(Trash2Source);
 export const Undo2 = createIcon(Undo2Source);
 export const Upload = createIcon(UploadSource);
+export const Wallet = createIcon(WalletSource);
 export const Waypoints = createIcon(WaypointsSource);
 export const Wifi = createIcon(WifiSource);
 export const WifiOff = createIcon(WifiOffSource);

crates/agent-gui/src/i18n/config.ts

@@ -1721,6 +1721,26 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.skillsSearch": "搜索技能...",
     "settings.skillsNoMatch": "没有匹配「{filter}」的技能",
     "settings.skillsStoreSearch": "搜索 ClawHub 技能",
+    "settings.skillsBulkSelect": "批量选择",
+    "settings.skillsBulkHint": "点击卡片切换开关 · Shift+点击可批量选择一段区间",
+    "settings.skillsBulkImportHint": "点击卡片勾选 · Shift+点击可批量选择一段区间",
+    "settings.skillsBulkUpdated": "已更新 {count} 个技能",
+    "settings.skillsBulkUndo": "撤销",
+    "settings.skillsStoreCategoryAll": "全部",
+    "settings.skillsStoreCategoryIntegrations": "集成",
+    "settings.skillsStoreCategoryAutomation": "自动化",
+    "settings.skillsStoreCategoryResearch": "研究",
+    "settings.skillsStoreCategoryDevelopment": "开发",
+    "settings.skillsStoreCategoryProductivity": "效率",
+    "settings.skillsStoreCategoryCommunication": "沟通",
+    "settings.skillsStoreCategoryCreative": "创意",
+    "settings.skillsStoreCategoryKnowledge": "知识",
+    "settings.skillsStoreCategoryAgents": "智能体",
+    "settings.skillsStoreCategoryOperations": "运维",
+    "settings.skillsStoreCategorySecurity": "安全",
+    "settings.skillsStoreCategoryFinance": "金融",
+    "settings.skillsStoreCategoryLifestyle": "生活",
+    "settings.skillsStoreCategoryOther": "其他",
     "settings.skillsStoreSortMostDownloaded": "下载最多",
     "settings.skillsStoreSortMostStarred": "星标最多",
     "settings.skillsStoreSortMostInstalled": "安装最多",
@@ -3620,6 +3640,26 @@ export const translations: Record<Locale, Record<string, string>> = {
     "settings.skillsSearch": "Search Skills...",
     "settings.skillsNoMatch": 'No skills matching "{filter}"',
     "settings.skillsStoreSearch": "Search ClawHub Skills",
+    "settings.skillsBulkSelect": "Bulk Select",
+    "settings.skillsBulkHint": "Click a card to toggle · Shift+click to select a range",
+    "settings.skillsBulkImportHint": "Click a card to check · Shift+click to select a range",
+    "settings.skillsBulkUpdated": "Updated {count} skills",
+    "settings.skillsBulkUndo": "Undo",
+    "settings.skillsStoreCategoryAll": "All",
+    "settings.skillsStoreCategoryIntegrations": "Integrations",
+    "settings.skillsStoreCategoryAutomation": "Automation",
+    "settings.skillsStoreCategoryResearch": "Research",
+    "settings.skillsStoreCategoryDevelopment": "Development",
+    "settings.skillsStoreCategoryProductivity": "Productivity",
+    "settings.skillsStoreCategoryCommunication": "Communication",
+    "settings.skillsStoreCategoryCreative": "Creative",
+    "settings.skillsStoreCategoryKnowledge": "Knowledge",
+    "settings.skillsStoreCategoryAgents": "Agents",
+    "settings.skillsStoreCategoryOperations": "Operations",
+    "settings.skillsStoreCategorySecurity": "Security",
+    "settings.skillsStoreCategoryFinance": "Finance",
+    "settings.skillsStoreCategoryLifestyle": "Lifestyle",
+    "settings.skillsStoreCategoryOther": "Other",
     "settings.skillsStoreSortMostDownloaded": "Most Downloaded",
     "settings.skillsStoreSortMostStarred": "Most Starred",
     "settings.skillsStoreSortMostInstalled": "Most Installed",

crates/agent-gui/src/lib/skills/clawHub.ts

@@ -4,6 +4,8 @@ export type ClawHubSkillCard = {
   slug: string;
   displayName: string;
   summary: string;
+  /** ClawHub 上的自由标签，用于本地分类与卡片标签展示。 */
+  topics: string[];
   latestVersion: string | null;
   downloads: number;
   stars: number;
@@ -78,6 +80,7 @@ export function normalizeClawHubSkillCard(raw: unknown): ClawHubSkillCard | null
     slug,
     displayName: asString(item.displayName) ?? slug,
     summary: asString(item.summary) ?? "",
+    topics: asStringArray(item.topics),
     latestVersion:
       asString(latestVersion.version) ?? asString(tags.latest) ?? asString(item.version),
     downloads: asNullableNumber(item.downloads) ?? asNullableNumber(stats.downloads) ?? 0,