feat: add skill update detection via SHA-256 content hashing

- Add content_hash and updated_at fields to skills table (DB migration v6→v7)
- Compute directory content hash on install/import/restore for version tracking
- Add check_updates command: downloads repos, compares hashes, returns update list
- Add update_skill command: backs up old files, re-downloads and replaces SSOT
- Backfill content_hash for existing skills on first update check
- Add "Check Updates" button and per-skill update badge/button in UnifiedSkillsPanel
- Add i18n keys for zh/en/ja
This commit is contained in:
Jason
2026-04-05 19:19:01 +08:00
parent 46488ecd93
commit e3179ad9e4
13 changed files with 660 additions and 14 deletions
+121 -7
View File
@@ -1,7 +1,14 @@
import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Sparkles, Trash2, ExternalLink } from "lucide-react";
import {
Sparkles,
Trash2,
ExternalLink,
RefreshCw,
Loader2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { TooltipProvider } from "@/components/ui/tooltip";
import {
type ImportSkillSelection,
@@ -15,7 +22,10 @@ import {
useScanUnmanagedSkills,
useImportSkillsFromApps,
useInstallSkillsFromZip,
useCheckSkillUpdates,
useUpdateSkill,
type InstalledSkill,
type SkillUpdateInfo,
} from "@/hooks/useSkills";
import type { AppId } from "@/lib/api/types";
import { ConfirmDialog } from "@/components/ConfirmDialog";
@@ -44,6 +54,7 @@ export interface UnifiedSkillsPanelHandle {
openImport: () => void;
openInstallFromZip: () => void;
openRestoreFromBackup: () => void;
checkUpdates: () => void;
}
function formatSkillBackupDate(unixSeconds: number): string {
@@ -83,6 +94,22 @@ const UnifiedSkillsPanel = React.forwardRef<
useScanUnmanagedSkills();
const importMutation = useImportSkillsFromApps();
const installFromZipMutation = useInstallSkillsFromZip();
const {
data: skillUpdates,
refetch: checkUpdates,
isFetching: isCheckingUpdates,
} = useCheckSkillUpdates();
const updateSkillMutation = useUpdateSkill();
const updatesMap = useMemo(() => {
const map: Record<string, SkillUpdateInfo> = {};
if (skillUpdates) {
for (const u of skillUpdates) {
map[u.id] = u;
}
}
return map;
}, [skillUpdates]);
const enabledCounts = useMemo(() => {
const counts = { claude: 0, codex: 0, gemini: 0, opencode: 0, openclaw: 0 };
@@ -191,6 +218,33 @@ const UnifiedSkillsPanel = React.forwardRef<
}
};
const handleCheckUpdates = async () => {
try {
const result = await checkUpdates();
const updates = result.data || [];
if (updates.length === 0) {
toast.success(t("skills.noUpdates"), { closeButton: true });
} else {
toast.info(t("skills.updatesFound", { count: updates.length }), {
closeButton: true,
});
}
} catch (error) {
toast.error(t("common.error"), { description: String(error) });
}
};
const handleUpdateSkill = async (skill: InstalledSkill) => {
try {
const updated = await updateSkillMutation.mutateAsync(skill.id);
toast.success(t("skills.updateSuccess", { name: updated.name }), {
closeButton: true,
});
} catch (error) {
toast.error(t("skills.updateFailed"), { description: String(error) });
}
};
const handleOpenRestoreFromBackup = async () => {
setRestoreDialogOpen(true);
try {
@@ -256,15 +310,35 @@ const UnifiedSkillsPanel = React.forwardRef<
openImport: handleOpenImport,
openInstallFromZip: handleInstallFromZip,
openRestoreFromBackup: handleOpenRestoreFromBackup,
checkUpdates: handleCheckUpdates,
}));
return (
<div className="px-6 flex flex-col flex-1 min-h-0 overflow-hidden">
<AppCountBar
totalLabel={t("skills.installed", { count: skills?.length || 0 })}
counts={enabledCounts}
appIds={MCP_SKILLS_APP_IDS}
/>
<div className="flex items-center justify-between">
<AppCountBar
totalLabel={t("skills.installed", { count: skills?.length || 0 })}
counts={enabledCounts}
appIds={MCP_SKILLS_APP_IDS}
/>
<Button
type="button"
variant="ghost"
size="sm"
className="h-7 text-xs gap-1"
onClick={handleCheckUpdates}
disabled={isCheckingUpdates || !skills || skills.length === 0}
>
{isCheckingUpdates ? (
<Loader2 size={12} className="animate-spin" />
) : (
<RefreshCw size={12} />
)}
{isCheckingUpdates
? t("skills.checkingUpdates")
: t("skills.checkUpdates")}
</Button>
</div>
<div className="flex-1 overflow-y-auto overflow-x-hidden pb-24">
{isLoading ? (
@@ -290,8 +364,14 @@ const UnifiedSkillsPanel = React.forwardRef<
<InstalledSkillListItem
key={skill.id}
skill={skill}
hasUpdate={!!updatesMap[skill.id]}
isUpdating={
updateSkillMutation.isPending &&
updateSkillMutation.variables === skill.id
}
onToggleApp={handleToggleApp}
onUninstall={() => handleUninstall(skill)}
onUpdate={() => handleUpdateSkill(skill)}
isLast={index === skills.length - 1}
/>
))}
@@ -339,15 +419,21 @@ UnifiedSkillsPanel.displayName = "UnifiedSkillsPanel";
interface InstalledSkillListItemProps {
skill: InstalledSkill;
hasUpdate?: boolean;
isUpdating?: boolean;
onToggleApp: (id: string, app: AppId, enabled: boolean) => void;
onUninstall: () => void;
onUpdate?: () => void;
isLast?: boolean;
}
const InstalledSkillListItem: React.FC<InstalledSkillListItemProps> = ({
skill,
hasUpdate,
isUpdating,
onToggleApp,
onUninstall,
onUpdate,
isLast,
}) => {
const { t } = useTranslation();
@@ -387,6 +473,14 @@ const InstalledSkillListItem: React.FC<InstalledSkillListItemProps> = ({
<span className="text-xs text-muted-foreground/50 flex-shrink-0">
{sourceLabel}
</span>
{hasUpdate && (
<Badge
variant="outline"
className="shrink-0 text-[10px] px-1.5 py-0 h-4 border-amber-500 text-amber-600 dark:text-amber-400"
>
{t("skills.updateAvailable")}
</Badge>
)}
</div>
{skill.description && (
<p
@@ -404,7 +498,27 @@ const InstalledSkillListItem: React.FC<InstalledSkillListItemProps> = ({
appIds={MCP_SKILLS_APP_IDS}
/>
<div className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
<div
className="flex-shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
style={hasUpdate ? { opacity: 1 } : undefined}
>
{hasUpdate && onUpdate && (
<Button
type="button"
variant="ghost"
size="icon"
className="h-7 w-7 hover:text-blue-500 hover:bg-blue-100 dark:hover:text-blue-400 dark:hover:bg-blue-500/10"
onClick={onUpdate}
disabled={isUpdating}
title={t("skills.update")}
>
{isUpdating ? (
<Loader2 size={14} className="animate-spin" />
) : (
<RefreshCw size={14} />
)}
</Button>
)}
<Button
type="button"
variant="ghost"
+44
View File
@@ -10,6 +10,7 @@ import {
type DiscoverableSkill,
type ImportSkillSelection,
type InstalledSkill,
type SkillUpdateInfo,
} from "@/lib/api/skills";
import type { AppId } from "@/lib/api/types";
@@ -283,6 +284,48 @@ export function useInstallSkillsFromZip() {
});
}
// ========== 更新检测 ==========
/**
* 检查 Skills 更新(手动触发)
*/
export function useCheckSkillUpdates() {
return useQuery({
queryKey: ["skills", "updates"],
queryFn: () => skillsApi.checkUpdates(),
enabled: false,
staleTime: 5 * 60 * 1000,
});
}
/**
* 更新单个 Skill
*/
export function useUpdateSkill() {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (id: string) => skillsApi.updateSkill(id),
onSuccess: (updatedSkill) => {
queryClient.setQueryData<InstalledSkill[]>(
["skills", "installed"],
(oldData) => {
if (!oldData) return [updatedSkill];
return oldData.map((s) =>
s.id === updatedSkill.id ? updatedSkill : s,
);
},
);
queryClient.setQueryData<SkillUpdateInfo[]>(
["skills", "updates"],
(oldData) => {
if (!oldData) return oldData;
return oldData.filter((u) => u.id !== updatedSkill.id);
},
);
},
});
}
// ========== 辅助类型 ==========
export type {
@@ -290,5 +333,6 @@ export type {
DiscoverableSkill,
ImportSkillSelection,
SkillBackupEntry,
SkillUpdateInfo,
AppId,
};
+9
View File
@@ -1573,6 +1573,15 @@
"installFailed": "Failed to install",
"uninstallSuccess": "Skill {{name}} uninstalled",
"uninstallFailed": "Failed to uninstall",
"update": "Update",
"updating": "Updating...",
"updateAvailable": "Update",
"updateSuccess": "Skill {{name}} updated to latest version",
"updateFailed": "Failed to update",
"checkUpdates": "Check Updates",
"checkingUpdates": "Checking...",
"noUpdates": "All skills are up to date",
"updatesFound": "{{count}} skill(s) have updates available",
"error": {
"skillNotFound": "Skill not found: {{directory}}",
"missingRepoInfo": "Missing repository info (owner or name)",
+9
View File
@@ -1573,6 +1573,15 @@
"installFailed": "インストールに失敗しました",
"uninstallSuccess": "スキル {{name}} をアンインストールしました",
"uninstallFailed": "アンインストールに失敗しました",
"update": "更新",
"updating": "更新中...",
"updateAvailable": "更新あり",
"updateSuccess": "スキル {{name}} を最新バージョンに更新しました",
"updateFailed": "更新に失敗しました",
"checkUpdates": "更新を確認",
"checkingUpdates": "確認中...",
"noUpdates": "すべてのスキルは最新です",
"updatesFound": "{{count}} 個のスキルに更新があります",
"error": {
"skillNotFound": "スキルが見つかりません: {{directory}}",
"missingRepoInfo": "リポジトリ情報(owner または name)が不足しています",
+9
View File
@@ -1573,6 +1573,15 @@
"installFailed": "安装失败",
"uninstallSuccess": "技能 {{name}} 已卸载",
"uninstallFailed": "卸载失败",
"update": "更新",
"updating": "更新中...",
"updateAvailable": "可更新",
"updateSuccess": "技能 {{name}} 已更新到最新版本",
"updateFailed": "更新失败",
"checkUpdates": "检查更新",
"checkingUpdates": "检查中...",
"noUpdates": "所有技能已是最新版本",
"updatesFound": "发现 {{count}} 个技能有可用更新",
"error": {
"skillNotFound": "技能不存在:{{directory}}",
"missingRepoInfo": "缺少仓库信息(owner 或 name",
+20
View File
@@ -25,6 +25,8 @@ export interface InstalledSkill {
readmeUrl?: string;
apps: SkillApps;
installedAt: number;
contentHash?: string;
updatedAt: number;
}
export interface SkillUninstallResult {
@@ -78,6 +80,14 @@ export interface Skill {
repoBranch?: string;
}
/** Skill 更新信息 */
export interface SkillUpdateInfo {
id: string;
name: string;
currentHash?: string;
remoteHash: string;
}
/** 仓库配置 */
export interface SkillRepo {
owner: string;
@@ -149,6 +159,16 @@ export const skillsApi = {
return await invoke("discover_available_skills");
},
/** 检查 Skills 更新 */
async checkUpdates(): Promise<SkillUpdateInfo[]> {
return await invoke("check_skill_updates");
},
/** 更新单个 Skill */
async updateSkill(id: string): Promise<InstalledSkill> {
return await invoke("update_skill", { id });
},
// ========== 兼容旧 API ==========
/** 获取技能列表(兼容旧 API) */