From 14a1354c95a2081fb32e36917a1b05873b2a662b Mon Sep 17 00:00:00 2001 From: Codex Date: Wed, 21 Oct 2026 13:56:37 +0900 Subject: [PATCH] fix(B02): show installed recommendation actions and remove duplicate navigation --- package.json | 1 + scripts/test-recommended-skills-dom.mjs | 110 ++++++++++++++++++ scripts/test-recommended-skills-ui.mjs | 54 +++++++-- .../src/capabilities/RecommendedSkills.tsx | 40 +++++-- src/renderer/src/capabilities/SkillsPage.tsx | 4 +- .../src/capabilities/recommended-flow.css | 10 +- src/renderer/src/capabilities/skills-host.css | 2 - 7 files changed, 196 insertions(+), 25 deletions(-) create mode 100644 scripts/test-recommended-skills-dom.mjs diff --git a/package.json b/package.json index 8dc664a..50da7cb 100644 --- a/package.json +++ b/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", diff --git a/scripts/test-recommended-skills-dom.mjs b/scripts/test-recommended-skills-dom.mjs new file mode 100644 index 0000000..7015657 --- /dev/null +++ b/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({}} 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('
', { 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()} diff --git a/scripts/test-recommended-skills-ui.mjs b/scripts/test-recommended-skills-ui.mjs index 2a90320..d177b93 100644 --- a/scripts/test-recommended-skills-ui.mjs +++ b/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 click('.yc-skill-recommendation-meta [aria-label="使用推荐技能 Archify"]') + await wait('document.querySelector("[data-recommendation-id=archify] .sm-use-btn")?.title.includes("启用")') + 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 })) diff --git a/src/renderer/src/capabilities/RecommendedSkills.tsx b/src/renderer/src/capabilities/RecommendedSkills.tsx index 84c2306..b968238 100644 --- a/src/renderer/src/capabilities/RecommendedSkills.tsx +++ b/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 } } -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([]) const [loading, setLoading] = useState(true) + const [catalogRevision, setCatalogRevision] = useState(0) const [unavailable, setUnavailable] = useState('') const [view, setView] = useState(null) const [detail, setDetail] = useState(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 => { 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) }}>{enabling ? '正在启用…' : skill.enabled ? '去使用' : '启用后使用'} if (loading) return
加载中…
- if (unavailable) return

推荐技能目录暂不可用

{unavailable}

+ if (unavailable) return

推荐技能目录暂不可用

{unavailable}

return <> {error && !detail &&

{error}

} @@ -253,20 +257,36 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang
{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
{ if (event.target === event.currentTarget && ['Enter', ' '].includes(event.key)) { event.preventDefault(); setDetail(recommendation) } }}> - setDetail(recommendation)} actions={
event.stopPropagation()}>
} /> -

{recommendation.author}v{recommendation.version}{recommendation.license}{foreign && 其他窗口正在安装}{useButton(recommendation, match.skill)}

+ setDetail(recommendation)} + actions={
event.stopPropagation()}> + {match.state === 'current' && !pending ? + : } +
} /> +

{recommendation.author}v{recommendation.version}{recommendation.license}{foreign && 其他窗口正在安装}

})}
-
{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 } metadata={<>v{detail.version}{detail.license}{detail.author}{detail.containsScripts && 包含脚本}} @@ -274,7 +294,7 @@ export function RecommendedSkills({ cwd, installed, onUseSkill, onInstalledChang actions={<> {pending ? <> : confirming ? <> - : <>{useButton(detail, match.skill, true)}{canInstall && }} + : <>{useButton(detail, match.skill, true)}{canInstall && }} }> {confirming && } {operation && operation.phase !== 'idle' &&
diff --git a/src/renderer/src/capabilities/SkillsPage.tsx b/src/renderer/src/capabilities/SkillsPage.tsx index 482293d..12f91c3 100644 --- a/src/renderer/src/capabilities/SkillsPage.tsx +++ b/src/renderer/src/capabilities/SkillsPage.tsx @@ -100,9 +100,9 @@ export default function SkillsPage({ cwd, onUseSkill, onCreateSkill, onFindSkill {view === 'market' ? <>
{['推荐', 'SkillHub', '套件'].map(value => )}
{category === '推荐' ?
- { void reload().catch(reason => { if (mounted.current) setError(String(reason.message ?? reason)) }) }} onViewInstalled={() => { setView('installed'); setQuery('') }} /> + { void reload().catch(reason => { if (mounted.current) setError(String(reason.message ?? reason)) }) }} />
- :

当前未连接{category}目录服务

你可以导入本地技能，或查看已安装技能。

} + :

当前未连接{category}目录服务

你可以导入本地技能，或通过顶部“已安装”查看现有技能。

}
:
{batch &&
0 && matches.every(item => selected.includes(item.id))} onChange={event => setSelected(event.target.checked ? matches.map(item => item.id) : [])} />已选择 {selected.length} 项
} {loading ?
加载中…
: !matches.length ?
{query ? '没有找到相关技能' : '暂无已安装技能'}
:
{(['workspace', 'user'] as const).map(scope => { const group = matches.filter(item => item.scope === scope); return !!group.length &&
{scope === 'workspace' ? '空间技能' : '自定义技能'}({group.length})
{group.map(skill =>
{ if (event.target === event.currentTarget && ['Enter', ' '].includes(event.key)) { event.preventDefault(); if (batch) toggleSelected(skill.id); else setSelectedId(skill.id) } }}> diff --git a/src/renderer/src/capabilities/recommended-flow.css b/src/renderer/src/capabilities/recommended-flow.css index 67eea9d..fe0ea7a 100644 --- a/src/renderer/src/capabilities/recommended-flow.css +++ b/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)} diff --git a/src/renderer/src/capabilities/skills-host.css b/src/renderer/src/capabilities/skills-host.css index 0ef8891..c276c22 100644 --- a/src/renderer/src/capabilities/skills-host.css +++ b/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}