Verifying desktop frontend changes
Full-app runs need an OpenCode session + live model turn. For pure frontend component changes, mount the component in a throwaway vite page instead:
- Create
apps/desktop/verify-<x>.html(plain html,<div id="root">,<script type="module" src="/src/verify-<x>.tsx">) andapps/desktop/src/verify-<x>.tsx(ReactDOM.createRoot, import./index.cssfor Tailwind, import the component via@/). Vite serves any .html underapps/desktop/automatically. cd apps/desktop && npx vite --port 5199 --strictPort(background). The npx wrapper may double-spawn and report "port in use" failure while the first instance is fine — checklsof -iTCP:5199before retrying.- Drive with the browser-control skill (Chrome HTTP API, port 9528):
createWindow→waitForSelector→readDom→screenshotTab(screenshots land in~/Downloads/). Gotchas:evalScriptis blocked by CSP on the extension — usereadDom/scrollTabinstead;readDomrequires an explicit"attributes": []or it errors with "Value is unserializable". - Clean up:
closeTab, kill the vite pid, delete both harness files, confirmgit statusis clean.