story-kit: merge 243_bug_replace_pnpm_with_npm

.story_kit/project.toml

@@ -1,7 +1,7 @@
 [[component]]
 name = "frontend"
 path = "frontend"
-setup = ["pnpm install", "pnpm run build"]
+setup = ["npm install", "npm run build"]
 teardown = []
 
 [[component]]
@@ -87,12 +87,12 @@ Read CLAUDE.md first, then .story_kit/README.md to understand the dev process.
 - Run `git diff master...HEAD` to review the actual changes for obvious coding mistakes (unused imports, dead code, unhandled errors, hardcoded values)
 - Run `cargo clippy --all-targets --all-features` and note any warnings
 - If a `frontend/` directory exists:
-  - Run `pnpm run build` and note any TypeScript errors
+  - Run `npm run build` and note any TypeScript errors
   - Run `npx @biomejs/biome check src/` and note any linting issues
 
 ### 2. Test Verification
 - Run `cargo test` and verify all tests pass
-- If `frontend/` exists: run `pnpm test --run` and verify all frontend tests pass
+- If `frontend/` exists: run `npm test` and verify all frontend tests pass
 - Review test quality: look for tests that are trivial or don't assert meaningful behavior
 
 ### 3. Manual Testing Support
@@ -118,7 +118,7 @@ Print your QA report to stdout before your process exits. The server will automa
 
 ### Test Verification
 - cargo test: PASS/FAIL (N tests)
-- pnpm test: PASS/FAIL/SKIP (N tests)
+- npm test: PASS/FAIL/SKIP (N tests)
 - Test quality issues: (list any trivial/weak tests, or "None")
 
 ### Manual Testing Plan
@@ -164,12 +164,12 @@ Read CLAUDE.md first, then .story_kit/README.md to understand the dev process.
 - Run `git diff master...HEAD` to review the actual changes for obvious coding mistakes (unused imports, dead code, unhandled errors, hardcoded values)
 - Run `cargo clippy --all-targets --all-features` and note any warnings
 - If a `frontend/` directory exists:
-  - Run `pnpm run build` and note any TypeScript errors
+  - Run `npm run build` and note any TypeScript errors
   - Run `npx @biomejs/biome check src/` and note any linting issues
 
 ### 2. Test Verification
 - Run `cargo test` and verify all tests pass
-- If `frontend/` exists: run `pnpm test --run` and verify all frontend tests pass
+- If `frontend/` exists: run `npm test` and verify all frontend tests pass
 - Review test quality: look for tests that are trivial or don't assert meaningful behavior
 
 ### 3. Manual Testing Support
@@ -195,7 +195,7 @@ Print your QA report to stdout before your process exits. The server will automa
 
 ### Test Verification
 - cargo test: PASS/FAIL (N tests)
-- pnpm test: PASS/FAIL/SKIP (N tests)
+- npm test: PASS/FAIL/SKIP (N tests)
 - Test quality issues: (list any trivial/weak tests, or "None")
 
 ### Manual Testing Plan
@@ -237,7 +237,7 @@ Read CLAUDE.md first, then .story_kit/README.md to understand the dev process.
 The merge pipeline uses a temporary merge-queue branch and worktree to isolate merges from master. Simple additive conflicts (both branches adding code at the same location) are resolved automatically by keeping both additions. Complex conflicts (modifying the same lines differently) are reported without touching master.
 
 ## Fixing Minor Gate Failures
-If quality gates fail (cargo clippy, cargo test, pnpm build, pnpm test), attempt to fix minor issues yourself before reporting to the human.
+If quality gates fail (cargo clippy, cargo test, npm run build, npm test), attempt to fix minor issues yourself before reporting to the human.
 
 **Fix yourself (up to 2 attempts total):**
 - Syntax errors (missing semicolons, brackets, commas)

.story_kit/specs/tech/STACK.md

@@ -9,7 +9,7 @@ This project is a standalone Rust **web server binary** that serves a Vite/React
     *   **Framework:** Poem HTTP server with WebSocket support for streaming; HTTP APIs should use Poem OpenAPI (Swagger) for non-streaming endpoints.
 *   **Frontend:** TypeScript + React
     *   **Build Tool:** Vite
-    *   **Package Manager:** pnpm (required)
+    *   **Package Manager:** npm
     *   **Styling:** CSS Modules or Tailwind (TBD - Defaulting to CSS Modules)
     *   **State Management:** React Context / Hooks
     *   **Chat UI:** Rendered Markdown with syntax highlighting.
@@ -91,8 +91,8 @@ To support both Remote and Local models, the system implements a `ModelProvider`
 *   **Quality Gates:**
     *   `npx @biomejs/biome check src/` must show 0 errors, 0 warnings
     *   `npm run build` must succeed
-    *   `npx vitest run` must pass
+    *   `npm test` must pass
-    *   `npx playwright test` must pass
+    *   `npm run test:e2e` must pass
     *   No `any` types allowed (use proper types or `unknown`)
     *   React keys must use stable IDs, not array indices
     *   All buttons must have explicit `type` attribute
@@ -119,7 +119,7 @@ To support both Remote and Local models, the system implements a `ModelProvider`
 Multiple instances can run simultaneously in different worktrees. To avoid port conflicts:
 
 - **Backend:** Set `STORYKIT_PORT` to a unique port (default is 3001). Example: `STORYKIT_PORT=3002 cargo run`
-- **Frontend:** Run `pnpm dev` from `frontend/`. It auto-selects the next unused port. It reads `STORYKIT_PORT` to know which backend to talk to, so export it before running: `export STORYKIT_PORT=3002 && cd frontend && pnpm dev`
+- **Frontend:** Run `npm run dev` from `frontend/`. It auto-selects the next unused port. It reads `STORYKIT_PORT` to know which backend to talk to, so export it before running: `export STORYKIT_PORT=3002 && cd frontend && npm run dev`
 
 When running in a worktree, use a port that won't conflict with the main instance (3001). Ports 3002+ are good choices.
 

Makefile

@@ -8,7 +8,7 @@ help:
 	@echo "  make release V=x.y.z  Build both targets and publish a Gitea release"
 	@echo ""
 	@echo "Prerequisites:"
-	@echo "  build-macos: Rust stable toolchain, pnpm"
+	@echo "  build-macos: Rust stable toolchain, npm"
 	@echo "  build-linux: cargo install cross   AND   Docker Desktop running"
 	@echo ""
 	@echo "Output:"
@@ -16,7 +16,7 @@ help:
 	@echo "  Linux : target/x86_64-unknown-linux-musl/release/story-kit"
 
 ## Build a native macOS release binary.
-## The frontend is compiled by build.rs (pnpm build) and embedded via rust-embed.
+## The frontend is compiled by build.rs (npm run build) and embedded via rust-embed.
 ## Verify dynamic deps afterwards: otool -L target/release/story-kit
 build-macos:
 	cargo build --release

README.md

@@ -10,8 +10,8 @@ You can also run the frontend and backend separately in development (Vite dev se
 ```bash
 # Build the frontend
 cd frontend
-pnpm install 
+npm install
-pnpm dev
+npm run dev
 
 # Run the server (serves embedded frontend/dist/)
 cargo run
@@ -35,7 +35,7 @@ Story Kit ships as a **single self-contained binary** with the React frontend em
 ### macOS
 
 ```bash
-# Native build – no extra tools required beyond Rust + pnpm
+# Native build – no extra tools required beyond Rust + npm
 make build-macos
 # Output: target/release/story-kit
 
@@ -109,10 +109,10 @@ The frontend uses **Vitest** for unit tests and **Playwright** for end-to-end te
 cd frontend
 
 # Run unit tests
-pnpm test
+npm test
 
 # Run end-to-end tests
-pnpm test:e2e
+npm run test:e2e
 ```
 
 ### Backend Tests

frontend/package.json

@@ -24,7 +24,7 @@
     "@biomejs/biome": "^2.4.2",
     "@playwright/test": "^1.47.2",
     "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/node": "^25.0.0",
     "@types/react": "^19.1.8",

frontend/src/components/WorkItemDetailPanel.test.tsx

@@ -25,6 +25,7 @@ vi.mock("../api/agents", () => ({
 
 import { agentsApi, subscribeAgentStream } from "../api/agents";
 import { api } from "../api/client";
+
 const { WorkItemDetailPanel } = await import("./WorkItemDetailPanel");
 
 const mockedGetWorkItemContent = vi.mocked(api.getWorkItemContent);

frontend/src/components/WorkItemDetailPanel.tsx

@@ -482,9 +482,10 @@ export function WorkItemDetailPanel({
 
 					{/* Placeholder sections for future content */}
 					{(
-						[
+						[{ id: "coverage", label: "Coverage" }] as {
-							{ id: "coverage", label: "Coverage" },
+							id: string;
-						] as { id: string; label: string }[]
+							label: string;
+						}[]
 					).map(({ id, label }) => (
 						<div
 							key={id}

script/test

@@ -9,7 +9,7 @@ cargo test --manifest-path "$PROJECT_ROOT/Cargo.toml"
 
 echo "=== Running frontend unit tests ==="
 cd "$PROJECT_ROOT/frontend"
-pnpm test
+npm test
 
 echo "=== Running e2e tests ==="
-pnpm test:e2e
+npm run test:e2e

script/test_coverage

@@ -64,7 +64,7 @@ echo "=== Running frontend tests with coverage ==="
 FRONTEND_DIR="$PROJECT_ROOT/frontend"
 FRONTEND_LINE_COV=0
 if [ -d "$FRONTEND_DIR" ]; then
-    FRONTEND_REPORT=$(cd "$FRONTEND_DIR" && pnpm run test:coverage 2>&1) || true
+    FRONTEND_REPORT=$(cd "$FRONTEND_DIR" && npm run test:coverage 2>&1) || true
     echo "$FRONTEND_REPORT"
 
     # Parse "All files" line from vitest coverage text table.

server/build.rs

@@ -18,7 +18,7 @@ fn main() {
     println!("cargo:rerun-if-changed=build.rs");
     println!("cargo:rerun-if-env-changed=PROFILE");
     println!("cargo:rerun-if-changed=../frontend/package.json");
-    println!("cargo:rerun-if-changed=../frontend/pnpm-lock.yaml");
+    println!("cargo:rerun-if-changed=../frontend/package-lock.json");
     println!("cargo:rerun-if-changed=../frontend/vite.config.ts");
     println!("cargo:rerun-if-changed=../frontend/index.html");
     println!("cargo:rerun-if-changed=../frontend/src");
@@ -30,7 +30,7 @@ fn main() {
     }
 
     // When cross-compiling (e.g. musl via `cross`), the Docker container
-    // has no Node/pnpm. The release script builds macOS first, so
+    // has no Node/npm. The release script builds macOS first, so
     // frontend/dist/ already exists. Skip the frontend build in that case.
     let target = env::var("TARGET").unwrap_or_default();
     let host = env::var("HOST").unwrap_or_default();
@@ -45,6 +45,6 @@ fn main() {
     let frontend_dir = Path::new("../frontend");
 
     // Ensure dependencies are installed and build the frontend bundle.
-    run("pnpm", &["install"], frontend_dir);
+    run("npm", &["install"], frontend_dir);
-    run("pnpm", &["build"], frontend_dir);
+    run("npm", &["run", "build"], frontend_dir);
 }