데스크톱 프론트엔드 변경 사항 확인하기
전체 앱을 실행하려면 OpenCode 세션과 라이브 모델 회전이 필요합니다. 순수 프론트엔드 컴포넌트 변경의 경우, 대신 임시 Vite 페이지에 컴포넌트를 마운트하세요:
apps/desktop/verify-<x>.html(일반 html,<div id="root">,<script type="module" src="/src/verify-<x>.tsx">)과apps/desktop/src/verify-<x>.tsx(ReactDOM.createRoot, Tailwind를 위해./index.css임포트,@/로 컴포넌트 임포트)를 생성합니다. Vite는apps/desktop/아래의 모든.html파일을 자동으로 제공합니다.cd apps/desktop && npx vite --port 5199 --strictPort(백그라운드). npx 래퍼가 이중으로 실행되어 "포트 사용 중" 오류를 보고할 수 있으며, 이때 첫 번째 인스턴스는 정상적입니다. 재시도 전에lsof -iTCP:5199로 확인하세요.- 브라우저 제어 스킬(Chrome HTTP API, 포트 9528)을 사용하여 구동:
createWindow→waitForSelector→readDom→screenshotTab(스크린샷은~/Downloads/에 저장됩니다). 주의사항:evalScript는 확장 프로그램의 CSP에 의해 차단되므로readDom/scrollTab을 사용하세요.readDom은 명시적인"attributes": []가 필요하며, 그렇지 않으면 "Value is unserializable" 오류가 발생합니다. - 정리:
closeTab, vite 프로세스 종료, 두 harness 파일 삭제,git status가 깨끗한지 확인합니다.