Migrate Frontend to Vite Build Tool

CLAUDE.md

@@ -21,11 +21,16 @@ Writing tools application:
 
 ### Frontend (Office Add-in)
 - **Office.js APIs** - Microsoft Word integration
+- **Build Tool**: Vite + TypeScript
 - **State Management**: Jotai atoms (see `frontend/src/contexts/`)
-- **Path Alias**: `@/*` maps to `./src/*` (webpack config)
-- **Entry Points**:
-  - `src/taskpane.html` - Word task pane
-  - `src/editor/editor.html` - Standalone demo editor and user study
+- **Path Alias**: `@/*` maps to `./src/*` (Vite config)
+- **Entry Points** (at root level, not in src/):
+  - `index.html` - Root entry point served at `/`
+  - `taskpane.html` - Word task pane
+  - `editor.html` - Standalone demo editor and user study
+  - `logs.html` - Logging viewer
+  - `popup.html` - Add-in popup
+  - `commands.html` - Ribbon commands
 - **Manifest**: `frontend/manifest.xml` for Office Add-in configuration
 
 ### Backend
@@ -36,6 +41,17 @@ Writing tools application:
 ## Non-Obvious Configuration
 
 - **TypeScript**: Path aliases enabled (`@/*` → `./src/*`)
+- **Vite Multi-Entry Setup**: The `vite.config.ts` uses `rollupOptions.input` to define multiple HTML entry points at the root level. Entry point files live at root, not in `src/`.
+- **Root Entry Point**: `index.html` lives at the root level (not in `publicDir`). Vite automatically serves it at `/` without custom configuration.
+
+## Debugging Approach
+
+When encountering issues during development:
+
+1. **Verify assumptions before "fixing"** - Don't accept initial problem statements at face value. Reproduce the issue yourself and understand the root cause.
+2. **Start simple** - Try the simplest solution first (e.g., moving a file to the expected location) before adding complex code (middleware, plugins, etc).
+3. **Test in isolation**, then test integration.
+4. **Document why configurations exist** - Explain non-obvious setups (but avoid documenting the obvious).
 
 ## User Study Mode
 

frontend/TESTING.md

@@ -0,0 +1,120 @@
+# Vite Build Regression Tests
+
+This directory contains regression tests for the Vite build configuration to prevent issues that were caught during code review.
+
+## Asset Structure
+
+The project uses two types of assets:
+
+- **`src/assets/`** - Assets imported in TypeScript/React code (e.g., images used in components)
+  - Processed by Vite during build
+  - Output with content hashes (e.g., `logo_black-DiXekjqI.png`)
+  - Use `@/assets/...` imports in code
+
+- **`public/assets/`** - Static assets never imported in code
+  - Copied as-is to `dist/assets/`
+  - Accessed via absolute paths in HTML (e.g., `/assets/about.png`)
+
+## Test Suites
+
+### 1. Build Output Tests (`test-build-output.mjs`)
+
+Tests the production build output to ensure:
+- ✅ HTML files are at `dist/` root (not `dist/src/`)
+- ✅ No HTML files remain in subdirectories
+- ✅ Asset paths in HTML use absolute paths (`/assets/...`)
+- ✅ Static files from `public/` are copied to `dist/` root
+- ✅ Assets directory structure is correct
+- ✅ `manifest.xml` exists and is properly transformed
+
+**Run:** `npm run test:build`
+
+**When to run:** After any changes to `vite.config.ts` or build process
+
+### 2. Dev Server Tests (`test-dev-server.mjs`)
+
+Tests the development server to ensure:
+- ✅ HTML entry points are accessible at root paths
+- ✅ Static files from `public/` are served correctly
+- ✅ Asset files are accessible at `/assets/`
+- ✅ Non-existent paths return 404
+- ✅ Files that should NOT exist (like `/src/taskpane.html`) return 404
+
+**Run:** `npm run test:dev-server`
+
+**Prerequisites:** Dev server must be running (`npm run dev-server`)
+
+### 3. Combined Test (`test:vite`)
+
+Runs a full build and tests the output.
+
+**Run:** `npm run test:vite`
+
+## Issues These Tests Prevent
+
+### Issue 1: HTML Files in Wrong Location
+**Problem:** HTML files were output to `dist/src/` instead of `dist/` root, causing 404s.
+
+**Test:** Build Output Test #1, #2
+
+**How:** Verifies all HTML files exist at dist root and no HTML files exist in subdirectories.
+
+### Issue 2: Broken Asset Paths
+**Problem:** When HTML files were manually moved, relative asset paths broke (e.g., `../assets/...` became incorrect).
+
+**Test:** Build Output Test #3
+
+**How:** Parses HTML files to verify asset paths use absolute paths (`/assets/...`).
+
+### Issue 3: Static Files Not Copied
+**Problem:** Before using `publicDir`, static files weren't copied correctly.
+
+**Test:** Build Output Test #4
+
+**How:** Verifies all static files from `public/` exist in `dist/`.
+
+### Issue 4: Dev Server Path Issues
+**Problem:** Dev server wasn't serving files at expected paths.
+
+**Test:** Dev Server Tests #1-4
+
+**How:** Makes HTTP requests to verify all endpoints return correct status codes.
+
+## CI Integration
+
+Add to your CI pipeline:
+
+```yaml
+- name: Build and Test
+  run: |
+    cd frontend
+    npm install
+    npm run test:vite
+```
+
+## Local Development
+
+Before committing changes to Vite config:
+
+```bash
+# Build and test
+npm run test:vite
+
+# Or test individually
+npm run build
+npm run test:build
+
+# For dev server tests (in separate terminal)
+npm run dev-server
+npm run test:dev-server
+```
+
+## Adding New Tests
+
+When adding new entry points or changing the build structure:
+
+1. Add new test cases to `test-build-output.mjs` or `test-dev-server.mjs`
+2. Run tests to verify they fail without your changes
+3. Implement your changes
+4. Verify tests pass
+5. Commit both changes and updated tests

frontend/src/commands/commands.html → frontend/commands.html

@@ -16,5 +16,7 @@
 		></script>
 	</head>
 
-	<body></body>
+	<body>
+		<script type="module" src="./src/commands/commands.ts"></script>
+	</body>
 </html>

frontend/src/editor/editor.html → frontend/editor.html

@@ -23,5 +23,6 @@
 
 	<body>
 		<div id="container"></div>
+		<script type="module" src="./src/editor/index.tsx"></script>
 	</body>
 </html>

frontend/src/logs/logs.html → frontend/logs.html

@@ -11,5 +11,6 @@
 
 	<body>
 		<div id="container"></div>
+		<script type="module" src="./src/logs/index.tsx"></script>
 	</body>
 </html>