Scaffold NewApproach: Full-stack Bun+Hono+TypeScript+TailwindCSS project

- Create modular project structure with src/backend, src/frontend, public - Hono server with routing, static file serving, and API endpoints - TailwindCSS styling pipeline with Tailwind CLI - Vanilla JS frontend (extensible for frameworks) - Complete TypeScript configuration and type checking - Auth module as self-contained submodule - Ready for development: bun run dev (port 3000) - All dependencies installed and tested Also: - Lock main branch with read-only settings in VS Code - Create .github/copilot-instructions.md with Monica persona - Initialize session logging system Status: Project ready for feature development
2026-01-09 13:33:22 +00:00
parent e4e3e65ea4
commit c33ee3dfe7
19 changed files with 1999 additions and 0 deletions
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Auth Module Test</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      max-width: 800px;
+      margin: 40px auto;
+      padding: 20px;
+      line-height: 1.6;
+    }
+    .test-section {
+      border: 1px solid #ddd;
+      padding: 20px;
+      margin-bottom: 20px;
+      border-radius: 4px;
+    }
+    .test-section h3 {
+      margin-top: 0;
+    }
+    .test-result {
+      padding: 10px;
+      margin: 10px 0;
+      border-left: 4px solid #4CAF50;
+      background: #f1f8f4;
+    }
+    .test-result.error {
+      border-left-color: #f44336;
+      background: #fdecea;
+    }
+    button {
+      padding: 10px 20px;
+      margin: 5px 5px 5px 0;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    button:hover {
+      background: #0056b3;
+    }
+    code {
+      background: #f4f4f4;
+      padding: 2px 6px;
+      border-radius: 3px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Auth Module Test</h1>
+  <p>Interactive test page for the Auth module. Run tests to verify functionality.</p>
+
+  <div class="test-section">
+    <h3>1. Module Availability</h3>
+    <button onclick="testModuleExists()">Test Module Load</button>
+    <div id="module-test-result"></div>
+  </div>
+
+  <div class="test-section">
+    <h3>2. Token Storage</h3>
+    <button onclick="testTokenStorage()">Test Token Storage</button>
+    <div id="storage-test-result"></div>
+  </div>
+
+  <div class="test-section">
+    <h3>3. Configuration</h3>
+    <button onclick="testConfiguration()">Test Configuration</button>
+    <div id="config-test-result"></div>
+  </div>
+
+  <div class="test-section">
+    <h3>4. Clear Tokens</h3>
+    <button onclick="testClearTokens()">Clear All Tokens</button>
+    <div id="clear-test-result"></div>
+  </div>
+
+  <script>
+    // temporary: using inline module for testing without bundler
+
+    function logResult(elementId, message, isError = false) {
+      const element = document.getElementById(elementId);
+      const resultDiv = document.createElement('div');
+      resultDiv.className = `test-result ${isError ? 'error' : ''}`;
+      resultDiv.textContent = message;
+      element.appendChild(resultDiv);
+    }
+
+    function testModuleExists() {
+      const elementId = 'module-test-result';
+      document.getElementById(elementId).innerHTML = '';
+
+      if (typeof window.Auth !== 'undefined') {
+        logResult(elementId, '✓ Auth module loaded successfully');
+      } else {
+        logResult(elementId, '✗ Auth module not found', true);
+      }
+    }
+
+    function testTokenStorage() {
+      const elementId = 'storage-test-result';
+      document.getElementById(elementId).innerHTML = '';
+
+      try {
+        // Note: This test requires the compiled JS version. 
+        // For now, we're testing localStorage directly
+        const testKey = 'test:token';
+        const testValue = 'test-token-value-12345';
+
+        localStorage.setItem(testKey, testValue);
+        const retrieved = localStorage.getItem(testKey);
+
+        if (retrieved === testValue) {
+          logResult(elementId, '✓ localStorage working correctly');
+          localStorage.removeItem(testKey);
+          logResult(elementId, '✓ Cleanup successful');
+        } else {
+          logResult(elementId, '✗ localStorage retrieval failed', true);
+        }
+      } catch (error) {
+        logResult(elementId, `✗ Error: ${error.message}`, true);
+      }
+    }
+
+    function testConfiguration() {
+      const elementId = 'config-test-result';
+      document.getElementById(elementId).innerHTML = '';
+
+      if (typeof window.Auth !== 'undefined' && typeof window.Auth.configure === 'function') {
+        logResult(elementId, '✓ Auth.configure method exists');
+      } else {
+        logResult(elementId, '✗ Auth.configure method not found', true);
+      }
+    }
+
+    function testClearTokens() {
+      const elementId = 'clear-test-result';
+      document.getElementById(elementId).innerHTML = '';
+
+      try {
+        // Set some test tokens
+        localStorage.setItem('auth:pb-user', 'test-pb-token');
+        localStorage.setItem('auth:graph-user', 'test-graph-token');
+        logResult(elementId, '✓ Test tokens created');
+
+        // Clear them
+        localStorage.removeItem('auth:pb-user');
+        localStorage.removeItem('auth:graph-user');
+
+        const pbToken = localStorage.getItem('auth:pb-user');
+        const graphToken = localStorage.getItem('auth:graph-user');
+
+        if (!pbToken && !graphToken) {
+          logResult(elementId, '✓ Tokens cleared successfully');
+        } else {
+          logResult(elementId, '✗ Tokens still present after clear', true);
+        }
+      } catch (error) {
+        logResult(elementId, `✗ Error: ${error.message}`, true);
+      }
+    }
+
+    // Run initial module check on page load
+    window.addEventListener('DOMContentLoaded', testModuleExists);
+  </script>
+</body>
+</html>