Migrate Frontend to Vite Build Tool

[kcarnold]

This migration modernizes the build tooling while maintaining all existing functionality:

• Replace Webpack with Vite for faster builds and HMR
• Update package.json: remove webpack dependencies, add vite and @vitejs/plugin-react
• Create vite.config.ts with support for:
  • Multiple HTML entry points (taskpane, editor, logs, popup, commands)
  • HTTPS dev server with Office.js dev certificates
  • API proxy to backend at /api
  • Manifest.xml transformation for prod/dev
  • Static asset copying
  • Code splitting with React vendor chunk
• Update all HTML entry points to include script module tags
• Replace Webpack HMR with Vite HMR in index.tsx
• Update tsconfig.json for Vite compatibility:
  • moduleResolution: bundler
  • target: ES2020
  • isolatedModules: true
  • noEmit: true
• Add vite-env.d.ts for Vite type definitions
• Update CLAUDE.md documentation to reflect Vite build system

All endpoints, build outputs, and dev server functionality remain unchanged. Build commands maintain the same interface (npm run build, npm run dev-server).

To fix this problem, rather than performing a substring search for 'app.thoughtful-ai.com' or 'localhost' in the manifest.xml file content, we should properly parse any URLs present in the manifest, extract their hostnames, and then verify if these hosts are among a whitelist of valid hosts. This involves scanning the manifest.xml, extracting all URLs (likely via regex looking for typical URL patterns), parsing each with the standard URL class, and checking if the hostname is exactly 'localhost' or 'app.thoughtful-ai.com' (and not a suffix or embedded in a larger host).

Edit lines 145–149 in frontend/test-build-output.mjs to:

• Use a regex to extract all URLs from the manifest.xml content.
• For each found URL, use the URL class to parse the hostname.
• Check that all URLs have hosts that match the whitelist (exact match), failing the test if not.

Add any necessary helper code within this file. Only use standard library imports (no third-party packages).

---

[jooha-yoo]

Command npm run dev works, but npm run dev-server leads me to localhost page that says it can't be found (HTTP ERROR 404).

[kcarnold]

@jooha-yoo Thanks, try now. that was a lot of fighting overconfident hacking by coding agents...

To resolve the problem:

• General fix: Remove rejectUnauthorized: false so that certificate validation is not disabled by default. If testing must occur with self-signed certificates (as is common on localhost during dev), make bypassing certificate validation configurable—e.g., only allow it to be disabled when a safe environment variable (like ALLOW_INSECURE_HTTPS=1) is set.
• This code:
  In file frontend/test-dev-server.mjs, edit line 29 inside testEndpoint.
  Ideally, remove rejectUnauthorized: false entirely so that validation is enforced. If disabling validation is actually needed, wrap it with a clear check for a special environment variable, e.g.:

  // Only allow insecure connections if EXPLICITLY requested for local dev
  const agent = process.env.ALLOW_INSECURE_HTTPS === '1'
    ? new https.Agent({ rejectUnauthorized: false })
    : undefined;
  
  https.get(url, { agent }, ...)

• Implementation:
  • Remove the rejectUnauthorized: false literal in the options.
  • Optionally, add an agent with rejectUnauthorized: false only if an environment variable is set, so that production/test environments remain secure by default.
  • Leave documentation for how to opt in if needed.

---