debrief · IanMayo · Aug 21, 2025 · Aug 20, 2025 · Aug 20, 2025 · Aug 20, 2025
diff --git a/.claude/settings.local.json b/.claude/settings.local.json
@@ -2,7 +2,6 @@
   "permissions": {
     "allow": [
       "Bash(yarn init:*)",
-      "Bash(yarn add:*)",
       "Bash(mkdir:*)",
       "Bash(yarn build-plugin:*)",
       "Bash(rm:*)",
@@ -120,7 +119,9 @@
       "Bash(open http://localhost:5174/tool/translate?tab=example)",
       "Bash(open http://localhost:5174/tool/translate)",
       "Bash(GITHUB_PAGES=true yarn build)",
-      "Bash(gh run list:*)"
+      "Bash(gh run list:*)",
+      "Bash(npm run validate:*)",
+      "Bash(gh repo view:*)"
     ]
   }
 }
diff --git a/toolvault-frontend/playwright.config.ts b/toolvault-frontend/playwright.config.ts
@@ -18,7 +18,7 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: 'yarn preview --port 4173',
+    command: 'VITE_PREVIEW_MODE=true yarn preview --port 4173',
     url: 'http://localhost:4173',
     reuseExistingServer: !process.env.CI,
     timeout: 30 * 1000, // 30 seconds

diff --git a/toolvault-frontend/public/404.html b/toolvault-frontend/public/404.html
@@ -2,21 +2,17 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/ToolVault/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ToolVault - Tool Discovery and Execution Platform</title>
     <script>
-      // GitHub Pages SPA fallback
-      // Redirect to index.html with the path as a query parameter
-      const path = window.location.pathname.substring(1);
-      if (path && path !== 'index.html') {
-        window.history.replaceState(null, null, '/ToolVault/');
-        window.location.replace('/ToolVault/?route=' + encodeURIComponent(path));
-      }
+      // GitHub Pages SPA fallback for React Router
+      // Store the current path and redirect to index.html
+      sessionStorage.redirect = location.href;
+      location.replace('/ToolVault/');
     </script>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/toolvault-frontend/src/App.tsx b/toolvault-frontend/src/App.tsx
@@ -7,8 +7,11 @@ import ToolBrowser from './components/ToolBrowser/ToolBrowser';
 import './App.css';
 
 function App() {
+  // Get the base path from Vite's configuration
+  const basename = import.meta.env.BASE_URL;
+
   return (
-    <Router>
+    <Router basename={basename}>
       <Layout>
         <Routes>
           <Route path="/" element={<Home />} />

diff --git a/toolvault-frontend/src/main.tsx b/toolvault-frontend/src/main.tsx
@@ -3,6 +3,18 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 
+// Handle GitHub Pages SPA redirect
+(function() {
+  const redirect = sessionStorage.redirect;
+  delete sessionStorage.redirect;
+  if (redirect && redirect !== location.href) {
+    // Extract the path from the stored redirect URL
+    const redirectUrl = new URL(redirect);
+    const newPath = redirectUrl.pathname + redirectUrl.search + redirectUrl.hash;
+    history.replaceState({}, '', newPath);
+  }
+})();
+
 const rootElement = document.getElementById('root');
 if (!rootElement) {
   throw new Error('Root element not found');

diff --git a/toolvault-frontend/src/services/bundleLoader.ts b/toolvault-frontend/src/services/bundleLoader.ts
@@ -36,10 +36,15 @@ export class BundleLoader {
   }
 
   async loadPhase0Bundle(): Promise<ToolBundle> {
-    // Load the Phase 0 JavaScript bundle from the original location
+    // Load the Phase 0 JavaScript bundle from the correct location
+    const basePath = import.meta.env.BASE_URL || '/';
+    const isPreviewMode = import.meta.env.VITE_PREVIEW_MODE === 'true';
+
     const bundlePath = import.meta.env.DEV 
       ? '/examples/javascript-bundle/index.json'  // Vite dev server can serve parent directories with fs.allow
-      : '/examples/javascript-bundle/index.json'; // In production, this will be bundled
+      : isPreviewMode 
+        ? '/examples/javascript-bundle/index.json'  // Preview mode serves from root
+        : `${basePath}examples/javascript-bundle/index.json`; // GitHub Pages production
 
     return this.loadBundle(bundlePath);
   }
@@ -74,9 +79,14 @@ export class BundleLoader {
     }
 
     try {
+      const basePath = import.meta.env.BASE_URL || '/';
+      const isPreviewMode = import.meta.env.VITE_PREVIEW_MODE === 'true';
+
       const historyPath = import.meta.env.DEV 
         ? '/examples/javascript-bundle/history.json'
-        : '/examples/javascript-bundle/history.json';
+        : isPreviewMode 
+          ? '/examples/javascript-bundle/history.json'  // Preview mode serves from root
+          : `${basePath}examples/javascript-bundle/history.json`; // GitHub Pages production
 
       const response = await fetch(historyPath);
       if (!response.ok) {

diff --git a/toolvault-frontend/src/services/scriptLoader.ts b/toolvault-frontend/src/services/scriptLoader.ts
@@ -71,9 +71,14 @@ export class ScriptLoader {
     return new Promise((resolve, reject) => {
       // Determine script path based on tool category
       const category = this.getToolCategory(toolMetadata);
+      const basePath = import.meta.env.BASE_URL || '/';
+      const isPreviewMode = import.meta.env.VITE_PREVIEW_MODE === 'true';
+
       const scriptPath = import.meta.env.DEV
         ? `/examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js`  // Vite dev server can serve parent directories with fs.allow
-        : `/examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js`; // In production, this will be bundled
+        : isPreviewMode
+          ? `/examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js`  // Preview mode serves from root
+          : `${basePath}examples/javascript-bundle/tools/${category}/${toolMetadata.id}.js`; // GitHub Pages production
 
       // Create script element
       const script = document.createElement('script');