fix(B02): show installed recommendation actions and remove duplicate navigation

package.json

@@ -10,6 +10,7 @@
     "test:capability-slash:ui": "node scripts/test-capability-slash-ui.mjs",
     "test:recommended-skills": "esbuild scripts/recommended-skills-backend-regression.ts --bundle --platform=node --format=esm --external:esbuild --outfile=.tmp/recommended-skills-backend-regression.mjs --log-level=warning && node .tmp/recommended-skills-backend-regression.mjs",
     "test:recommended-skills:ui": "node scripts/test-recommended-skills-ui.mjs",
+    "test:recommended-skills:dom": "node scripts/test-recommended-skills-dom.mjs",
     "test:recommended-skills:app": "node scripts/verify-recommended-skills-app.cjs",
     "test:recommended-skills:package": "node scripts/test-recommended-archify-package.mjs",
     "test:composer-capabilities": "node scripts/run-composer-capabilities-regression.mjs",

scripts/test-recommended-skills-dom.mjs

@@ -0,0 +1,110 @@
+/** Offline real React DOM regression. Not a browser layout/pixel or native Electron test.
+ * Usage: YCODE_TEST_DOM_MODULE=/path/to/node_modules/jsdom node scripts/test-recommended-skills-dom.mjs
+ * --build-only creates a browser fixture without loading jsdom or Electron. No dependency installation. */
+import fs from 'node:fs'
+import path from 'node:path'
+import assert from 'node:assert/strict'
+import { createRequire } from 'node:module'
+const require = createRequire(import.meta.url)
+const base = path.resolve('.tmp'); fs.mkdirSync(base, { recursive: true })
+const output = fs.mkdtempSync(path.join(base, 'recommended-skills-dom-'))
+const source = path.resolve('src/renderer/src/capabilities/CapabilityCenter.tsx')
+fs.writeFileSync(path.join(output, 'fixture.tsx'), `import React from 'react';import{createRoot}from'react-dom/client';import SkillsPage from${JSON.stringify(source)};const root=createRoot(document.getElementById('root'));window.__mount=()=>root.render(<SkillsPage initialTab="skills" onBackToChat={()=>{}} cwd="/controlled/workspace" onUseSkill={s=>window.__uses.push(s)}/>);window.__unmount=()=>root.unmount();window.__mount();`)
+await require('esbuild').build({ entryPoints: [path.join(output, 'fixture.tsx')], outfile: path.join(output, 'fixture.js'), bundle: true, platform: 'browser', format: 'iife', jsx: 'automatic', loader: { '.svg': 'dataurl', '.png': 'dataurl', '.jpg': 'dataurl', '.woff': 'dataurl', '.woff2': 'dataurl', '.ttf': 'dataurl' }, logLevel: 'error' })
+if (process.argv.includes('--build-only')) { console.log(JSON.stringify({ result: 'BUILD_ONLY', output, limits: 'Compiled real React/CSS only; no UI execution or visual verification.' })); process.exit(0) }
+let JSDOM
+try { ({ JSDOM } = require(process.env.YCODE_TEST_DOM_MODULE || process.env.YCODE_JSDOM_MODULE || 'jsdom')) } catch { throw Error('Provide an already-installed jsdom through YCODE_TEST_DOM_MODULE; this test never installs dependencies.') }
+const rec = { id:'archify', name:'Archify', description:'Controlled recommendation', author:'fixture', license:'MIT', repository:'fixture/archify', version:'3', commit:'a'.repeat(40), packagePath:'archify.zip', sha256:'b'.repeat(64), expectedBytes:100, containsScripts:true }
+const current = { id:'user:rec', name:rec.name, description:rec.description, version:rec.version, path:'/controlled/archify', scope:'user', enabled:true, userInvocable:true, disableModelInvocation:false, source:'imported', userModified:false, origin:{recommendationId:rec.id, repository:rec.repository, commit:rec.commit, packagePath:rec.packagePath, archiveSha256:rec.sha256, version:rec.version, installedAt:1} }
+const checks = [], errors = []
+let installed=[], failEnable=false, failCatalog=false, catalog=[rec], changed=new Set(), progressListeners=new Set(), progress=null, calls=[], sequence=0, holdInstall=null
+const dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>', { url:'https://fixture.invalid', runScripts:'outside-only', pretendToBeVisual:true })
+const w=dom.window, d=w.document
+w.addEventListener('error', e=>errors.push(e.message))
+w.__uses=[]
+w.fetch=()=>{ throw Error('Network is forbidden in this fixture') }
+w.matchMedia=()=>({ matches:false, addEventListener(){}, removeEventListener(){} })
+w.ResizeObserver=class{observe(){} unobserve(){} disconnect(){}}
+const notify=()=>{ for(const listener of changed) listener() }
+const emit=(phase, operationId='foreign')=>{progress={phase,operationId,recommendationId:rec.id,receivedBytes:0,totalBytes:100,updatedAt:++sequence};for(const listener of progressListeners)listener(progress)}
+w.ycode={skills:{
+ list:async()=>installed, recommendations:async()=>{if(failCatalog)throw Error('controlled catalog failure'); return catalog},
+ onChanged:fn=>{changed.add(fn);return()=>changed.delete(fn)}, onInstallProgress:fn=>{progressListeners.add(fn);return()=>progressListeners.delete(fn)}, installState:async()=>progress,
+ read:async()=>({skill:current,content:'Controlled content',files:[]}),
+ setEnabled:async(id,enabled)=>{calls.push(['enable',id]);if(failEnable)throw Error('controlled enable failure');installed=installed.map(s=>s.id===id?{...s,enabled}:s);notify()},
+ installRecommended:async(id,options)=>{calls.push(['install',id,options]);emit('downloading',options.operationId);await new Promise(resolve=>{holdInstall=resolve});installed=[current];emit('installed',options.operationId);notify();return current},
+ cancelInstall:async()=>({cancelled:true}),remove:async()=>{},export:async()=>null,importPath:async()=>null
+},resources:{openExternal:async()=>{throw Error('External navigation forbidden')}}}
+const pause=()=>new Promise(resolve=>setTimeout(resolve,15))
+const wait=async(fn,label='condition')=>{for(let i=0;i<150;i++){if(fn())return;await pause()}throw Error('Timed out: '+label)}
+const check=(label,value)=>{assert.ok(value,label); checks.push(label)}
+const card=()=>d.querySelector('.yc-skill-recommendation-card')
+const button=label=>d.querySelector(`[aria-label="${label}"]`)
+const click=async(el)=>{assert.ok(el,'click target exists');el.click();await pause()}
+const set=async(skills,state)=>{installed=skills;notify();await wait(()=>card()?.dataset.recommendationState===state,state);await pause()}
+const close=async()=>{if(button('关闭技能详情'))await click(button('关闭技能详情'))}
+try {
+ w.eval(fs.readFileSync(path.join(output,'fixture.js'),'utf8'))
+ await wait(()=>card(),'initial render')
+ check('uninstalled uses add slot',!!card().querySelector('.sm-add-btn'))
+ check('normal footer removed from DOM',!d.querySelector('.yc-skill-recommendation-footer')&&!d.body.textContent.includes('查看已安装技能'))
+ await set([current],'current')
+ check('current uses installed CardFrame',!!card().querySelector('.sm-card--installed'))
+ check('current removes Plus/add DOM',!card().querySelector('.sm-add-btn'))
+ check('current use occupies status slot exactly once',card().querySelectorAll('.sm-status .sm-use-btn').length===1&&!card().querySelector('.yc-skill-recommendation-meta button'))
+ await click(card().querySelector('.sm-use-btn'))
+ check('use invokes one draft callback without installation',w.__uses.length===1&&!calls.some(c=>c[0]==='install'))
+ check('use does not open install detail',!d.querySelector('[role=dialog]'))
+ check('top nav count reflects installed list',button('已安装技能').textContent.includes('(1)'))
+ await click(button('已安装技能'));await wait(()=>d.querySelector('[data-skill-id="user:rec"]'))
+ await click(button('返回专家中心'));await wait(()=>card())
+ check('reopen retains current state',card().dataset.recommendationState==='current')
+ await set([{...current,enabled:false}],'current');failEnable=true
+ await click(card().querySelector('.sm-use-btn'));await wait(()=>d.body.textContent.includes('controlled enable failure'))
+ check('enable failure prevents draft invocation',w.__uses.length===1)
+ failEnable=false;await click(card().querySelector('.sm-use-btn'));await wait(()=>w.__uses.length===2)
+ check('disabled skill enabled before callback',w.__uses.at(-1).enabled===true&&calls.filter(c=>c[0]==='enable').length===2)
+ await set([{...current,userInvocable:false}],'current')
+ check('non-invocable current cannot use or reinstall',card().querySelector('.sm-use-btn')?.disabled&&!card().querySelector('.sm-add-btn'))
+ for(const [name,skill,state,label] of [
+ ['outdated',{...current,origin:{...current.origin,version:'2'}},'outdated','更新 Archify'],
+ ['modified',{...current,userModified:true},'modified','替换 Archify'],
+ ['broken',{...current,error:'bad document'},'outdated','修复 Archify'],
+ ['same-name local',{...current,origin:undefined,userModified:true},'conflict','替换 Archify'],
+ ['broken same-name local',{...current,origin:undefined,error:'bad local'},'conflict','替换 Archify'],
+ ['different source',{...current,origin:{...current.origin,repository:'other/source'}},'outdated','更新 Archify']
+ ]) {
+ await set([skill],state);check(name+' installed identity distinction',!!card().querySelector('.sm-card--installed')===(state!=='conflict'));check(name+' not represented as first add',!card().querySelector('.sm-add-btn')&&!!button(label));const before=calls.length
+ await click(button(label));check(name+' requires explicit confirmation',!!button('确认安装推荐技能')&&calls.length===before);await close()
+ }
+ await set([{...current,id:'workspace:rec',scope:'workspace'}],'none')
+ check('workspace is not treated as managed current',!!card().querySelector('.sm-add-btn')&&!card().querySelector('.sm-card--installed'))
+ await set([],'none');await click(button('安装 Archify'))
+ const staleConfirm=button('确认安装推荐技能');const beforeExternal=calls.filter(c=>c[0]==='install').length
+ await set([current],'current');staleConfirm.click();await pause()
+ check('external current while confirming prevents duplicate installation',calls.filter(c=>c[0]==='install').length===beforeExternal);await close()
+ await set([],'none');await click(button('安装 Archify'))
+ check('first install confirms provenance and scripts',d.querySelector('[role=dialog]').textContent.includes('fixture/archify')&&d.querySelector('[role=dialog]').textContent.includes('不会执行仓库中的任何安装命令'))
+ const confirm=button('确认安装推荐技能');confirm.click();confirm.click();await wait(()=>holdInstall)
+ check('duplicate confirmation issues only one request',calls.filter(c=>c[0]==='install').length===1)
+ check('real host progress rendered',d.querySelector('[data-install-phase="downloading"]'))
+ holdInstall();await wait(()=>card()?.dataset.recommendationState==='current');await close()
+ check('install success automatically switches action DOM',!card().querySelector('.sm-add-btn')&&!!card().querySelector('.sm-use-btn'))
+ await set([],'none');check('external uninstall restores add',!!card().querySelector('.sm-add-btn'))
+ emit('downloading');await wait(()=>d.querySelector('[data-foreign-install=true]'))
+ check('external install blocks new add',card().querySelector('.sm-add-btn').disabled)
+ emit('installed');await wait(()=>!d.querySelector('[data-foreign-install=true]'))
+ check('external terminal progress clears block',!card().querySelector('.sm-add-btn').disabled)
+ // Unmount/remount via existing navigation reloads catalog, without touching real storage.
+ failCatalog=true;await click(button('已安装技能'));await click(button('返回专家中心'));await wait(()=>d.querySelector('.yc-skill-recommendation-unavailable'))
+ check('unavailable has no duplicate installed entry',!d.body.textContent.includes('查看已安装技能')&&!!button('已安装技能'))
+ failCatalog=false;await click(d.querySelector('.yc-skill-recommendation-unavailable button'));await wait(()=>card())
+ check('catalog retry recovers in place',!!card())
+ catalog=[];await click(button('已安装技能'));await click(button('返回专家中心'));await wait(()=>d.querySelector('.yc-skill-recommendation-unavailable'))
+ check('empty catalog has no footer',!d.querySelector('.yc-skill-recommendation-footer')&&!d.body.textContent.includes('查看已安装技能'))
+ for(const tab of ['SkillHub','套件']) {await click([...d.querySelectorAll('[role=tab]')].find(e=>e.textContent===tab));check(tab+' has only top installed navigation',!d.body.textContent.includes('查看已安装技能')&&!!button('已安装技能'))}
+ check('no uncaught renderer errors',errors.length===0)
+ const report={result:'PASS',checks,calls,errors,limits:'Real React in offline jsdom; callback boundary tested, not production composer dispatch. No native Chromium, computed layout, screenshot, theme/hover/focus pixels, model SDK, actual install or network.'}
+ fs.writeFileSync(path.join(output,'report.json'),JSON.stringify(report,null,2));console.log(JSON.stringify({result:'PASS',checks:checks.length,output}))
+} catch(error) {fs.writeFileSync(path.join(output,'failure.json'),JSON.stringify({error:String(error),stack:error.stack,checks,errors,html:d.body.innerHTML},null,2));console.error('Evidence:',output);throw error}
+finally {w.__unmount?.();w.close()}

scripts/test-recommended-skills-ui.mjs

@@ -17,7 +17,7 @@ if (!electron) {
   const env = { ...process.env }
   delete env.ELECTRON_RUN_AS_NODE
   delete env.ELECTRON_RENDERER_URL
-  const child = spawn(electronModule, ['--no-sandbox', '--disable-gpu-sandbox', path.resolve('scripts/test-recommended-skills-ui.mjs'), output], { stdio: 'inherit', windowsHide: true, env })
+  const child = spawn(electronModule, [path.resolve('scripts/test-recommended-skills-ui.mjs'), output], { stdio: 'inherit', windowsHide: true, env })
   const timer = setTimeout(() => child.kill(), 120000)
   process.exitCode = await new Promise(resolve => child.on('exit', code => { clearTimeout(timer); resolve(code ?? 1) }))
 } else {
@@ -28,7 +28,7 @@ if (!electron) {
     const userData = path.join(output, 'data')
     fs.mkdirSync(userData, { recursive: true })
     app.setPath('userData', userData)
-    const checks = [], errors = [], calls = [], screenshots = []
+    const checks = [], errors = [], calls = [], screenshots = [], actionStyles = []
 
     const recommendation = {
       id: 'archify',
@@ -197,6 +197,29 @@ createRoot(document.getElementById('root')).render(
       screenshots.push(name + '.png')
     }
 
+    const verifyCurrentActionStyles = async theme => {
+      const selector = '[data-recommendation-id=archify] .sm-use-btn'
+      const inspect = () => read(`(()=>{const b=document.querySelector(${JSON.stringify(selector)});const s=getComputedStyle(b);return{width:s.width,height:s.height,background:s.backgroundColor,color:s.color,outline:s.outline,focused:document.activeElement===b,hover:b.matches(':hover')}})()`)
+      win.webContents.sendInputEvent({type:'mouseMove',x:1,y:1})
+      await read(`document.activeElement?.blur()`); await pause(200)
+      const normal = await inspect()
+      check(theme + ' use action default background is transparent', normal.background, value => value === 'rgba(0, 0, 0, 0)' || value === 'transparent')
+      const point = await read(`(()=>{const r=document.querySelector(${JSON.stringify(selector)}).getBoundingClientRect();return{x:Math.round(r.x+r.width/2),y:Math.round(r.y+r.height/2)}})()`)
+      win.webContents.sendInputEvent({type:'mouseMove',...point});await pause(200)
+      const hover = await inspect()
+      check(theme + ' pointer enters use action', hover.hover, true)
+      check(theme + ' hover has a distinct background', hover.background !== normal.background, true)
+      await capture('installed-use-' + theme + '-hover')
+      win.webContents.sendInputEvent({type:'mouseMove',x:1,y:1})
+      win.webContents.sendInputEvent({type:'keyDown',keyCode:'Tab'});win.webContents.sendInputEvent({type:'keyUp',keyCode:'Tab'})
+      await read(`document.querySelector(${JSON.stringify(selector)}).focus()`);await pause(200)
+      const focus = await inspect()
+      check(theme + ' use action remains focusable with stable 24px slot', focus.focused && focus.width === '24px' && focus.height === '24px', true)
+      await capture('installed-use-' + theme + '-focus')
+      actionStyles.push({theme,normal,hover,focus})
+      await read(`document.activeElement?.blur()`)
+    }
+
     try {
       await win.loadFile(path.join(output, 'index.html'))
       await wait('!!document.querySelector(".yc-skills-page")')
@@ -229,7 +252,11 @@ createRoot(document.getElementById('root')).render(
       check('a first install is not an overwrite', await read(`(${JSON.stringify(calls)}.filter(c=>c[0]==='installRecommended').every(c=>c[2]?.overwrite!==true))`), true)
       await wait('document.querySelector("[data-recommendation-id=archify]").dataset.recommendationState==="current"')
       check('the card reports the recommendation as installed', await read('document.querySelector("[data-recommendation-id=archify]").dataset.recommendationState'), 'current')
-      check('the installed skill is not offered for download again', await read('document.querySelector("[data-recommendation-id=archify] .sm-add-btn")?.disabled'), true)
+      check('the installed skill has no add button', await read('!!document.querySelector("[data-recommendation-id=archify] .sm-add-btn")'), false)
+      check('the installed skill uses the recovered installed card', await read('!!document.querySelector("[data-recommendation-id=archify] .sm-card--installed")'), true)
+      check('the installed action uses the original action slot', await read('!!document.querySelector("[data-recommendation-id=archify] .sm-status .sm-use-btn")'), true)
+      check('no duplicate under-card use action remains', await read('!!document.querySelector(".yc-skill-recommendation-meta button")'), false)
+      check('the duplicate footer is absent', await read('!!document.querySelector(".yc-skill-recommendation-footer")'), false)
       check('the detail remains the same DOM instance throughout installation', await read('window.__detailBeforeInstall===document.querySelector("[role=dialog]")'), true)
       check('the detail offers use after installation', await read('document.querySelector("[role=dialog] .sm-skill-detail-action-row")?.textContent.includes("去使用")'), true)
       check('the success notification also offers use', await read('document.querySelector(".yc-skill-install-success")?.textContent.includes("去使用")'), true)
@@ -237,8 +264,13 @@ createRoot(document.getElementById('root')).render(
       await capture('installed-detail')
       await click('[role=dialog] .sm-skill-detail-close')
 
+      const installedActionStyle = await read(`(()=>{const b=document.querySelector('[data-recommendation-id=archify] .sm-use-btn');const s=getComputedStyle(b);const svg=b.querySelector('svg');return {width:s.width,height:s.height,svgWidth:getComputedStyle(svg).width,svgHeight:getComputedStyle(svg).height}})()`)
+      check('installed action uses recovered 24px slot and 16px icon', installedActionStyle, {width:'24px',height:'24px',svgWidth:'16px',svgHeight:'16px'})
+      await capture('installed-recommendation-light')
+      await verifyCurrentActionStyles('light')
+
       // The installed list stays reachable and the skill can be used.
-      await click('.yc-skill-recommendation-footer button')
+      await click('[aria-label="已安装技能"]')
       await wait('document.querySelectorAll(".sm-card").length===1')
       check('the installed skill appears in the installed list', await read('document.querySelector(".sm-card-name")?.textContent'), 'Archify')
       await click('[aria-label="返回专家中心"]')
@@ -247,7 +279,7 @@ createRoot(document.getElementById('root')).render(
       // A local skill with the same name requires an explicit overwrite.
       await read(`window.ycode.skills.qaSetInstalled(${JSON.stringify([localSkill])})`)
       await wait('document.querySelector("[data-recommendation-id=archify]").dataset.recommendationState==="conflict"')
-      await click('[aria-label="安装 Archify"]')
+      await click('[aria-label="替换 Archify"]')
       await wait('!!document.querySelector(".yc-skill-detail-shell")')
       check('a same-name local skill requires an explicit replacement', await read('document.querySelector(".yc-skill-detail-shell").textContent.includes("替换")'), true)
       check('the replacement notice mentions the local modification', await read('document.querySelector(".yc-skill-detail-shell").textContent.includes("本地内容已被修改")'), true)
@@ -295,8 +327,8 @@ createRoot(document.getElementById('root')).render(
       await click('.yc-skill-install-success [aria-label="使用推荐技能 Archify"]')
       check('the success notification invokes the same use callback', await read('window.__qa.uses.length'), 1)
       await read(`window.ycode.skills.qaSetInstalled(${JSON.stringify([{ ...installedRecommendation, enabled: false }])})`)
-      await wait('document.querySelector(".yc-skill-recommendation-meta")?.textContent.includes("启用后使用")')
+      await wait('document.querySelector("[data-recommendation-id=archify] .sm-use-btn")?.title.includes("启用")')
-      await click('.yc-skill-recommendation-meta [aria-label="使用推荐技能 Archify"]')
+      await click('[data-recommendation-id=archify] .sm-use-btn')
       await wait('window.__qa.uses.length===2')
       check('disabled recommendation is enabled before use', await read('window.__qa.uses.at(-1).enabled'), true)
       await read('window.ycode.skills.qaDelay(0)'); await read('window.ycode.skills.qaSetInstalled([])')
@@ -308,9 +340,10 @@ createRoot(document.getElementById('root')).render(
       await read(`location.reload()`)
       await wait('!!document.querySelector(".yc-skill-recommendation-unavailable")')
       check('an empty catalog is reported as unavailable, not as a maintenance page', await read('!!document.querySelector("[data-capability-maintenance]")'), false)
-      check('the unavailable state still offers the installed list', await read('!!document.querySelector(".yc-skill-recommendation-unavailable button")'), true)
+      check('the unavailable state keeps top installed navigation', await read('!!document.querySelector("[aria-label=已安装技能]")'), true)
+      check('the unavailable state has no duplicate installed entry', await read('[...document.querySelectorAll(".yc-skill-recommendation-unavailable button")].some(e=>e.textContent.includes("查看已安装技能"))'), false)
       await read(`window.ycode.skills.qaFailRecommendations(false)`)
-      await read(`location.reload()`)
+      await click('.yc-skill-recommendation-unavailable button')
       await wait('!!document.querySelector("[data-recommendation-id=archify]")')
 
       // An install owned by another window blocks a new install here.
@@ -354,6 +387,7 @@ createRoot(document.getElementById('root')).render(
       check('the dark layout keeps the recommendation card inside the viewport', await read(`(()=>{const c=document.querySelector('[data-recommendation-id=archify] .sm-card');if(!c)return false;const r=c.getBoundingClientRect();return r.left>=0&&r.right<=innerWidth+1})()`), true)
       check('the dark layout does not overflow the document', overflow.scrollWidth <= overflow.innerWidth + 1, true)
       await capture('recommendation-dark')
+      await verifyCurrentActionStyles('dark')
       win.setSize(720, 900)
       await pause(400)
       check('the recommendation card stays inside the narrow viewport', await read('(()=>{const c=document.querySelector("[data-recommendation-id=archify] .sm-card");if(!c)return false;const r=c.getBoundingClientRect();return r.left>=0&&r.right<=innerWidth+1})()'), true)
@@ -365,7 +399,7 @@ createRoot(document.getElementById('root')).render(
 
       check('no renderer errors', errors, [])
       fs.writeFileSync(path.join(output, 'report.json'), JSON.stringify({
-        result: 'PASS', checks, calls, screenshots,
+        result: 'PASS', checks, calls, screenshots, actionStyles,
         limits: 'Controlled host in isolated Electron; the shipped page and styles are used. No network, no real skill storage, no real install.'
       }, null, 2))
       console.log(JSON.stringify({ result: 'PASS', checks: checks.length, output }))

src/renderer/src/capabilities/RecommendedSkills.tsx

@@ -11,7 +11,6 @@ export interface RecommendedSkillsProps {
   installed: SkillRecord[]
   onUseSkill?(skill: SkillRecord): void
   onInstalledChange(): void
-  onViewInstalled(): void
 }
 
 type InstallPhase = SkillInstallProgress['phase'] | 'idle'
@@ -34,6 +33,7 @@ const Card = CardFrame as ComponentType<{
   sourceLabel?: string
   iconUrl?: string
   disabled?: boolean
+  installed?: boolean
   onOpen?(): void
   actions?: React.ReactNode
   className?: string
@@ -110,9 +110,10 @@ function InstalledOverview({ skill, cwd }: { skill?: SkillRecord; cwd?: string }
   </details>
 }
 
-export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChange, onViewInstalled }: RecommendedSkillsProps): React.JSX.Element {
+export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChange }: RecommendedSkillsProps): React.JSX.Element {
   const [recommendations, setRecommendations] = useState<RecommendedSkill[]>([])
   const [loading, setLoading] = useState(true)
+  const [catalogRevision, setCatalogRevision] = useState(0)
   const [unavailable, setUnavailable] = useState('')
   const [view, setView] = useState<InstallView | null>(null)
   const [detail, setDetail] = useState<RecommendedSkill | null>(null)
@@ -130,6 +131,7 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang
 
   useEffect(() => {
     let alive = true
+    setLoading(true); setUnavailable('')
     if (typeof window.ycode.skills.recommendations !== 'function') { setUnavailable('当前版本未提供推荐技能目录'); setLoading(false); return }
     void window.ycode.skills.recommendations().then(values => {
       if (!alive) return
@@ -138,7 +140,7 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang
     }).catch(reason => { if (alive) setUnavailable(String(reason.message ?? reason)) })
       .finally(() => { if (alive) setLoading(false) })
     return () => { alive = false }
-  }, [])
+  }, [catalogRevision])
   useEffect(() => {
     if (!notice) return
     const timer = window.setTimeout(() => setNotice(null), 6000)
@@ -181,7 +183,7 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang
 
   const begin = (recommendation: RecommendedSkill): void => {
     setDetail(recommendation)
-    if (running || submitting.current) return
+    if (running || submitting.current || matchInstalled(recommendation, installed).state === 'current') return
     setError('')
     const next: InstallView = { recommendation, operationId: operationId(), phase: 'idle', receivedBytes: 0, totalBytes: recommendation.expectedBytes, overwrite: false }
     active.current = next; setView(next)
@@ -189,6 +191,8 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang
   const run = async (overwrite: boolean): Promise<void> => {
     const current = active.current
     if (!current || current.phase !== 'idle' || submitting.current || foreign && isRunning(foreign.phase)) return
+    // An external install can finish while this confirmation is open.
+    if (matchInstalled(current.recommendation, installed).state === 'current') { active.current = null; setView(null); return }
     const operation = current.operationId
     submitting.current = true
     setError('')
@@ -244,7 +248,7 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang
       onClick={event => { event.stopPropagation(); void useSkill(skill) }}><UseSkillIcon />{enabling ? '正在启用…' : skill.enabled ? '去使用' : '启用后使用'}</button>
 
   if (loading) return <div className="sm-empty" role="status">加载中…</div>
-  if (unavailable) return <div className="sm-empty yc-skill-recommendation-unavailable"><p>推荐技能目录暂不可用</p><p>{unavailable}</p><button type="button" className="wb-button wb-button--secondary wb-button--medium" onClick={onViewInstalled}>查看已安装技能</button></div>
+  if (unavailable) return <div className="sm-empty yc-skill-recommendation-unavailable"><p>推荐技能目录暂不可用</p><p>{unavailable}</p><button type="button" className="wb-button wb-button--secondary wb-button--medium" onClick={() => setCatalogRevision(value => value + 1)}>重试加载推荐技能</button></div>
 
   return <>
     {error && !detail && <p className="yc-skill-error" role="alert">{error}</p>}
@@ -253,20 +257,36 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang
     <div className="sm-grid yc-skill-recommendation-grid">{matches.map(({ recommendation, match }) => {
       const operation = operationFor(recommendation)
       const pending = !!operation && isRunning(operation.phase)
-      const status = pending ? PHASE_LABEL[operation.phase] : match.state === 'current' ? '已安装' : match.state === 'modified' ? '已安装（本地已修改）' : match.state === 'outdated' ? '已安装（版本不同）' : match.state === 'conflict' ? '已存在同名本地技能' : '未安装'
+      const isInstalled = !!match.skill && match.state !== 'conflict'
+      const status = pending ? PHASE_LABEL[operation.phase] : isInstalled && match.skill?.error ? '已安装（损坏）' : match.state === 'current'
+        ? !match.skill?.enabled ? '已安装（已禁用）' : !match.skill.userInvocable ? '已安装（仅模型调用）' : '已安装'
+        : match.state === 'modified' ? '已安装（本地已修改）' : match.state === 'outdated' ? '已安装（版本不同）' : match.state === 'conflict' ? '已存在同名本地技能' : '未安装'
+      const installLabel = match.state === 'conflict' ? '替换' : match.skill?.error ? '修复' : match.state === 'outdated' ? '更新' : match.skill ? '替换' : '安装'
+      const useTitle = !match.skill?.userInvocable ? '此技能仅供模型调用' : !onUseSkill ? '当前无法使用技能' : enabling ? '正在启用…' : running ? '当前有推荐技能正在安装' : match.skill.enabled ? '去使用' : '启用后使用'
       return <div key={recommendation.id} className="yc-skill-card-keyboard yc-skill-recommendation-card" data-recommendation-id={recommendation.id} data-recommendation-state={match.state} data-install-phase={operation?.phase} role="button" tabIndex={0} aria-label={`查看 ${recommendation.name}`}
         onKeyDown={event => { if (event.target === event.currentTarget && ['Enter', ' '].includes(event.key)) { event.preventDefault(); setDetail(recommendation) } }}>
-        <Card title={recommendation.name} description={recommendation.description} iconUrl={skillAvatarUrl(recommendation.id)} sourceLabel={status} onOpen={() => setDetail(recommendation)} actions={<div className="sm-status" onClick={event => event.stopPropagation()}><button type="button" className={'sm-add-btn' + (pending ? ' sm-add-btn--loading' : '')} aria-label={`安装 ${recommendation.name}`} disabled={running || match.state === 'current'} title={running ? '当前有推荐技能正在安装' : undefined} onClick={() => begin(recommendation)}>{pending ? <span className="yc-skill-recommendation-spinner" aria-hidden /> : <PlusIcon />}</button></div>} />
+        <Card title={recommendation.name} description={recommendation.description} iconUrl={skillAvatarUrl(recommendation.id)} sourceLabel={status}
-        <p className="yc-skill-recommendation-meta"><span>{recommendation.author}</span><span>v{recommendation.version}</span><span>{recommendation.license}</span>{foreign && <span className="yc-skill-recommendation-busy">其他窗口正在安装</span>}{useButton(recommendation, match.skill)}</p>
+          installed={isInstalled} disabled={isInstalled && !match.skill?.enabled} onOpen={() => setDetail(recommendation)}
+          actions={<div className="sm-status" onClick={event => event.stopPropagation()}>
+            {match.state === 'current' && !pending ? <button type="button" className="sm-use-btn"
+              aria-label={`使用推荐技能 ${recommendation.name}`} title={useTitle}
+              disabled={enabling || running || !match.skill?.userInvocable || !onUseSkill}
+              onClick={() => { if (match.skill) void useSkill(match.skill) }}><UseSkillIcon /></button>
+              : <button type="button" className={(match.skill ? 'yc-skill-recommendation-replace-btn' : 'sm-add-btn') + (pending ? ' sm-add-btn--loading' : '')}
+                aria-label={`${installLabel} ${recommendation.name}`} disabled={running}
+                title={running ? '当前有推荐技能正在安装' : `${installLabel}推荐版本`}
+                onClick={() => begin(recommendation)}>{pending ? <span className="yc-skill-recommendation-spinner" aria-hidden /> : match.skill ? installLabel : <PlusIcon />}</button>}
+          </div>} />
+        <p className="yc-skill-recommendation-meta"><span>{recommendation.author}</span><span>v{recommendation.version}</span><span>{recommendation.license}</span>{foreign && <span className="yc-skill-recommendation-busy">其他窗口正在安装</span>}</p>
       </div>
     })}</div>
-    <div className="yc-skill-recommendation-footer"><button type="button" className="wb-button wb-button--secondary wb-button--medium" onClick={onViewInstalled}>查看已安装技能</button></div>
     {detail && (() => {
       const match = matchInstalled(detail, installed)
       const operation = operationFor(detail)
       const pending = !!operation && isRunning(operation.phase)
       const confirming = operation?.phase === 'idle'
       const canInstall = match.state !== 'current'
+      const installLabel = match.state === 'conflict' ? '替换' : match.skill?.error ? '修复' : match.state === 'outdated' ? '更新' : match.skill ? '替换' : '安装'
       return <SkillDetailShell title={detail.name} description={detail.description} ariaLabel={`推荐技能详情 ${detail.name}`} recommendationId={detail.id}
         avatar={<SkillAvatar name={detail.name} recommendationId={detail.id} size={68} />}
         metadata={<><span>v{detail.version}</span><span>{detail.license}</span><span>{detail.author}</span>{detail.containsScripts && <span>包含脚本</span>}</>}
@@ -274,7 +294,7 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang
         actions={<>
           {pending ? <><button type="button" className="sm-skill-detail-btn sm-skill-detail-btn--primary" disabled><span className="yc-skill-recommendation-spinner" />{PHASE_LABEL[operation.phase]}</button><button type="button" className="sm-skill-detail-btn" disabled={operation.phase === 'installing' || cancelPending} onClick={() => void cancel()}>{cancelPending ? '正在请求取消…' : '取消安装'}</button></>
             : confirming ? <><button type="button" className="sm-skill-detail-btn sm-skill-detail-btn--primary" aria-label="确认安装推荐技能" onClick={() => void run(!!match.skill)}>{match.skill ? '替换并安装' : '确认安装'}</button><button type="button" className="sm-skill-detail-btn" onClick={() => { active.current = null; setView(null) }}>返回详情</button></>
-              : <>{useButton(detail, match.skill, true)}{canInstall && <button type="button" className="sm-skill-detail-btn sm-skill-detail-btn--primary" aria-label={`安装推荐版本 ${detail.name}`} disabled={running} onClick={() => begin(detail)}>{operation?.phase === 'failed' || operation?.phase === 'cancelled' ? '重试安装' : match.skill ? '安装推荐版本' : '安装'}</button>}</>}
+              : <>{useButton(detail, match.skill, true)}{canInstall && <button type="button" className="sm-skill-detail-btn sm-skill-detail-btn--primary" aria-label={`${installLabel}推荐版本 ${detail.name}`} disabled={running} onClick={() => begin(detail)}>{operation?.phase === 'failed' || operation?.phase === 'cancelled' ? `重试${installLabel}` : match.skill ? `${installLabel}推荐版本` : '安装'}</button>}</>}
         </>}>
         {confirming && <InstallDisclosure recommendation={detail} installed={match.skill} />}
         {operation && operation.phase !== 'idle' && <div className="yc-skill-inline-install" role="status" aria-live="polite" data-install-phase={operation.phase} data-operation-id={operation.operationId}>

src/renderer/src/capabilities/SkillsPage.tsx

@@ -100,9 +100,9 @@ export default function SkillsPage({ cwd, onUseSkill, onCreateSkill, onFindSkill
       {view === 'market' ? <><div className="sm-search-panel"><div className="sm-segment-bar"><div className="sm-segment-group" role="tablist" aria-label="技能来源">{['推荐', 'SkillHub', '套件'].map(value => <button key={value} role="tab" aria-selected={category === value} className={'sm-segment-item' + (category === value ? ' sm-segment-item--active' : '')} onClick={() => setCategory(value)}>{value}</button>)}</div></div>
         {category === '推荐'
           ? <section className="sm-installed-section yc-skill-recommendation-section">
-            <RecommendedSkills cwd={cwd} installed={items} onUseSkill={onUseSkill} onInstalledChange={() => { void reload().catch(reason => { if (mounted.current) setError(String(reason.message ?? reason)) }) }} onViewInstalled={() => { setView('installed'); setQuery('') }} />
+            <RecommendedSkills cwd={cwd} installed={items} onUseSkill={onUseSkill} onInstalledChange={() => { void reload().catch(reason => { if (mounted.current) setError(String(reason.message ?? reason)) }) }} />
           </section>
-          : <div className="sm-empty yc-skill-market-unavailable"><SkillsIcon width={32} height={32} /><p>当前未连接{category}目录服务</p><p>你可以导入本地技能，或查看已安装技能。</p><Button onClick={() => { setView('installed'); setQuery('') }}>查看已安装技能</Button></div>}
+          : <div className="sm-empty yc-skill-market-unavailable"><SkillsIcon width={32} height={32} /><p>当前未连接{category}目录服务</p><p>你可以导入本地技能，或通过顶部“已安装”查看现有技能。</p></div>}
       </div></> : <section className="sm-installed-section">
         {batch && <div className="sm-batch-toolbar"><div className="sm-batch-toolbar-left"><input type="checkbox" aria-label="全选技能" checked={matches.length > 0 && matches.every(item => selected.includes(item.id))} onChange={event => setSelected(event.target.checked ? matches.map(item => item.id) : [])} />已选择 {selected.length} 项</div><div className="sm-batch-toolbar-right"><Button disabled={busy || !selected.length} onClick={() => { void run(async () => { for (const item of items.filter(value => selected.includes(value.id) && !value.error)) await window.ycode.skills.setEnabled(item.id, true, cwd) }) }}>启用</Button><Button disabled={busy || !selected.length} onClick={() => { void run(async () => { for (const item of items.filter(value => selected.includes(value.id) && !value.error)) await window.ycode.skills.setEnabled(item.id, false, cwd) }) }}>禁用</Button><Button disabled={busy || !selected.some(id => items.some(item => item.id === id && item.scope === 'user'))} onClick={() => setPendingRemove(items.filter(item => selected.includes(item.id) && item.scope === 'user'))}>卸载</Button></div></div>}
         {loading ? <div className="sm-empty" role="status">加载中…</div> : !matches.length ? <div className="sm-empty">{query ? '没有找到相关技能' : '暂无已安装技能'}</div> : <div className="sm-installed-list">{(['workspace', 'user'] as const).map(scope => { const group = matches.filter(item => item.scope === scope); return !!group.length && <section key={scope} className="sm-installed-group"><div className="sm-installed-group-header"><div className="sm-installed-group-title"><span>{scope === 'workspace' ? '空间技能' : '自定义技能'}</span><span className="sm-installed-group-count">({group.length})</span></div></div><div className="sm-grid">{group.map(skill => <div className="yc-skill-card-keyboard" key={skill.id} data-skill-id={skill.id} role={batch ? undefined : 'button'} tabIndex={0} aria-label={`查看 ${skill.name}`} onKeyDown={event => { if (event.target === event.currentTarget && ['Enter', ' '].includes(event.key)) { event.preventDefault(); if (batch) toggleSelected(skill.id); else setSelectedId(skill.id) } }}>

src/renderer/src/capabilities/recommended-flow.css

@@ -11,6 +11,14 @@
 .yc-skill-installed-overview>.markdown-body{margin-top:12px}
 .yc-skill-notice.yc-skill-install-success{display:flex;align-items:center;gap:12px;pointer-events:auto}
 .yc-skill-install-success .yc-skill-recommendation-link{display:inline-flex;align-items:center;gap:4px}
-.yc-skill-recommendation-meta .yc-skill-recommendation-link{display:inline-flex;align-items:center;gap:4px}
 .yc-skill-recommendation-link svg{width:14px;height:14px;flex:none}
 .yc-skill-recommendation-link:disabled{cursor:default;opacity:.5}
+/* Keep the recovered use icon/slot geometry; host theme tokens also cover dark mode. */
+.yc-skill-recommendation-card .sm-use-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:var(--yc-radius-md);cursor:pointer;color:var(--wb-color-text-primary)}
+.yc-skill-recommendation-card .sm-use-btn:hover:not(:disabled){background:var(--wb-palette-gray-5);color:var(--wb-color-text-primary)}
+.yc-skill-recommendation-card .sm-use-btn:disabled{cursor:default;opacity:.5;background:transparent}
+.yc-skill-recommendation-replace-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--yc-size-10);height:var(--yc-size-6);padding:0 calc(var(--yc-space-4) / 2);border:0;border-radius:var(--yc-radius-md);background:var(--wb-bg-hover);color:var(--wb-color-text-primary);font:inherit;font-size:var(--yc-font-size-3);white-space:nowrap;cursor:pointer}
+.yc-skill-recommendation-replace-btn:hover:not(:disabled){background:var(--wb-bg-hover-light)}
+.yc-skill-recommendation-replace-btn:disabled{cursor:default;opacity:.5}
+.yc-skill-recommendation-card .sm-use-btn:focus-visible,.yc-skill-recommendation-replace-btn:focus-visible{outline:var(--yc-space-1) solid var(--wb-border-focus);outline-offset:var(--yc-space-1)}
+html[data-theme="dark"] .yc-skill-recommendation-card .sm-use-btn:hover:not(:disabled){background:var(--wb-bg-hover-light)}

src/renderer/src/capabilities/skills-host.css

@@ -14,10 +14,8 @@
 .yc-skill-recommendation-card{position:relative}
 .yc-skill-recommendation-grid .yc-skill-recommendation-card>.sm-card{height:126px;box-sizing:border-box;padding-bottom:40px}
 .yc-skill-recommendation-meta{position:absolute;bottom:14px;left:20px;right:20px;display:flex;align-items:center;gap:8px;margin:0;color:var(--wb-color-text-tertiary);font-size:12px;line-height:20px}
-.yc-skill-recommendation-meta>.yc-skill-recommendation-link{margin-left:auto;white-space:nowrap}
 .yc-skill-recommendation-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .yc-skill-recommendation-busy{color:var(--wb-color-text-secondary)}
-.yc-skill-recommendation-footer{display:flex;justify-content:flex-start;margin-top:4px}
 .yc-skill-recommendation-progress{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--wb-border-default);border-radius:12px;background:var(--wb-bg-card);font-size:13px}
 .yc-skill-recommendation-progress-text{color:var(--wb-color-text-primary);font-weight:500}
 .yc-skill-recommendation-progress .yc-skill-error{flex:1;min-width:0}