Migrate to legend-state observer framework

Author: celonymire

.github/copilot-instructions.md

@@ -3,7 +3,7 @@
 This repository contains a VS Code extension that provides two webview-based tools for competitive programming: **Judge** and **Stress**.
 
 - Extension backend code lives under `src/extension/**` and uses the VS Code API. `JudgeViewProvider` and `StressViewProvider` extend `BaseViewProvider`, which handles webview setup, CSP nonce generation, workspaceState storage, and message dispatch.
-- Webview frontend code lives under `src/webview/**` and is built with Preact. It talks to the extension only through typed messages defined in `src/shared/*-messages.ts`.
+- Webview frontend code lives under `src/webview/**` and is built with Preact + `@legendapp/state` for reactive state management. It talks to the extension only through typed messages defined in `src/shared/*-messages.ts`.
 - Shared enums, message contracts, and types live under `src/shared/**` and define the protocol between extension and webviews (including the `Status` lifecycle and testcase structures).
 
 Build and tooling:
@@ -17,6 +17,7 @@ Design and implementation guidelines:
 - All extension ↔ webview communication must use the discriminated unions and enums in `src/shared/*-messages.ts`. Append to enums instead of reordering to keep numeric values and stored data stable.
 - Use `compile()` and `Runnable` from `src/extension/utils/runtime.ts` for running code, and `resolveVariables` / `resolveCommand` from `src/extension/utils/vscode.ts` for safe, cross-platform commands.
 - Use `TextHandler` for streamed output; always call `.reset()` for a fresh run and `.write(data, last)` for updates.
+- Use `@legendapp/state` for webview state: wrap components with `observer()`, access values via `.get()`, mutate via `.set()`, and use `<Memo>{() => obs$.get()}</Memo>` for direct DOM updates (e.g., streaming text).
 - Keep changes minimal and consistent with existing patterns. Prefer reusing the Judge/Stress provider and webview patterns over introducing new architectures.
 
 Additional path-specific details are defined in `.github/instructions/*.instructions.md`, which Copilot uses when working in matching files.

.github/instructions/webview-frontend.instructions.md

@@ -10,7 +10,13 @@ When changing files under `src/webview/**`:
 - Treat the `App.tsx` components under `src/webview/judge/` and `src/webview/stress/` as entry points for each view. They receive initial state and subsequent updates exclusively through message types defined in the shared message unions.
 - When you need new messages or actions from the webview to the extension, first extend the shared enums and message interfaces in `src/shared/*-messages.ts`, then update both the extension providers and the webview components to handle the new types. Avoid magic string message names.
 - Assume styles are provided by an external CSS file built from `src/styles/global.css` into `dist/styles.css` via Tailwind CLI. Do not import CSS directly into TypeScript/TSX; the extension side (`BaseViewProvider`) injects the stylesheet as a `<link>` in the webview HTML.
-- Prefer the existing lightweight stack (Preact + signals) for state management. Avoid introducing heavier frontend state libraries; instead, follow the current patterns used in the Judge and Stress apps.
+- Use `@legendapp/state` for reactive state management:
+  - Wrap components with `observer()` from `@legendapp/state/react` for automatic re-rendering.
+  - Access observable values with `.get()` and mutate with `.set(value)` or `.set(prev => newValue)`.
+  - Use `<Memo>{() => obs$.get()}</Memo>` for direct DOM updates that bypass VDOM diffing (ideal for streaming stdout/stderr).
+  - Use `useObservable(value)` for component-local observable state.
+  - Collections like `Map` and `Set` have fine-grained reactivity; use `state$.map.get(key)` to get an observable for a specific entry.
+  - Avoid introducing additional state libraries; follow the patterns in the Judge and Stress apps.
 - Keep UI logic decoupled from process execution details. The webview should focus on rendering state and sending/receiving typed messages, not on spawning processes or resolving filesystem paths.
 - Maintain consistency with existing components such as `AutoresizeTextarea`, `Testcase`, and `State` in terms of props, message handling, and minimal DOM manipulation.
 - Keep changes surgical: avoid large-scale refactors or stylistic rewrites unless they are necessary for a specific task.

bun.lock

@@ -9,7 +9,7 @@ import * as globals from "globals";
 export default [
   js.configs.recommended,
   {
-    ignores: ["dist/**", "node_modules/**", "src/external/**"],
+    ignores: ["dist/**", "node_modules/**"],
   },
   {
     files: ["src/**/*.ts", "src/**/*.tsx"],

eslint.config.ts

@@ -317,8 +317,8 @@
     "@rspack/cli": "^1.6.7",
     "@tailwindcss/postcss": "^4.1.17",
     "@types/node": "^22.19.2",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/vscode": "^1.106.1",
     "@types/vscode-webview": "^1.57.5",
     "@typescript-eslint/eslint-plugin": "^8.49.0",
@@ -337,10 +337,9 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@preact/signals-react": "^3.6.1",
-    "nu-observables": "^0.0.7",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "@legendapp/state": "3.0.0-beta.42",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "valibot": "^1.2.0"
   }
 }