fix

my-blog/static/js/ask-ai.js

@@ -16,11 +16,11 @@ function toggleAskAI() {
     }
 }
 
+// Global auth status
+let isOAuthAuthenticated = false;
+
 function checkAuthenticationStatus() {
-    const userSections = document.querySelectorAll('.user-section');
-    const isAuthenticated = userSections.length > 0;
-    
-    if (isAuthenticated) {
+    if (isOAuthAuthenticated) {
         // User is authenticated - show Ask AI UI
         document.getElementById('authCheck').style.display = 'none';
         document.getElementById('chatForm').style.display = 'block';
@@ -76,27 +76,26 @@ function askQuestion() {
     }
 }
 
+// Global user data
+let currentUser = null;
+
 function addUserMessage(question) {
     const chatHistory = document.getElementById('chatHistory');
-    const userSection = document.querySelector('.user-section');
     
     let userAvatar = '👤';
     let userDisplay = 'You';
     let userHandle = 'user';
     
-    if (userSection) {
-        const avatarImg = userSection.querySelector('.user-avatar');
-        const displayName = userSection.querySelector('.user-display-name');
-        const handle = userSection.querySelector('.user-handle');
-        
-        if (avatarImg && avatarImg.src) {
-            userAvatar = `<img src="${avatarImg.src}" alt="${displayName?.textContent || 'User'}" class="profile-avatar">`;
+    // Use currentUser data if available
+    if (currentUser) {
+        if (currentUser.avatar) {
+            userAvatar = `<img src="${currentUser.avatar}" alt="${currentUser.displayName || 'User'}" class="profile-avatar">`;
         }
-        if (displayName?.textContent) {
-            userDisplay = displayName.textContent;
+        if (currentUser.displayName) {
+            userDisplay = currentUser.displayName;
         }
-        if (handle?.textContent) {
-            userHandle = handle.textContent.replace('@', '');
+        if (currentUser.handle) {
+            userHandle = currentUser.handle;
         }
     }
     
@@ -253,6 +252,14 @@ function setupAskAIEventListeners() {
         handleAIResponse(event.detail);
     });
     
+    // Listen for OAuth authentication status updates
+    window.addEventListener('oauthAuthStatus', function(event) {
+        console.log('OAuth auth status updated:', event.detail);
+        isOAuthAuthenticated = event.detail.isAuthenticated;
+        currentUser = event.detail.user;
+        checkAuthenticationStatus();
+    });
+    
     // Listen for OAuth callback completion from iframe
     window.addEventListener('message', function(event) {
         if (event.data.type === 'oauth_success') {

oauth/src/App.css

@@ -44,7 +44,7 @@ body {
 
 .oauth-header-content {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   max-width: 800px;
   margin: 0 auto;
@@ -52,10 +52,6 @@ body {
   width: 100%;
 }
 
-.oauth-header-content:has(.oauth-user-profile) {
-  justify-content: space-between;
-}
-
 .oauth-app-title {
   font-size: 20px;
   font-weight: 800;
@@ -67,11 +63,7 @@ body {
   gap: 8px;
   align-items: center;
   flex: 1;
-}
-
-/* When user is logged in, actions take normal space */
-.oauth-header-content:has(.oauth-user-profile) .oauth-header-actions {
-  flex: 0 0 auto;
+  justify-content: flex-end;
 }
 
 /* OAuth User Profile in Header */

oauth/src/App.jsx

@@ -47,6 +47,16 @@ export default function App() {
       }
     }
 
+    // Notify blog about authentication status
+    const dispatchAuthStatus = () => {
+      window.dispatchEvent(new CustomEvent('oauthAuthStatus', {
+        detail: {
+          isAuthenticated: !!user,
+          user: user
+        }
+      }))
+    }
+
     // Listen for questions from blog
     window.addEventListener('postAIQuestion', handleAIQuestion)
 
@@ -55,6 +65,9 @@ export default function App() {
       dispatchAIProfileLoaded()
     }
 
+    // Dispatch auth status whenever user changes
+    dispatchAuthStatus()
+
     return () => {
       window.removeEventListener('postAIQuestion', handleAIQuestion)
     }

oauth/src/components/AuthButton.jsx

@@ -25,27 +25,9 @@ export default function AuthButton({ user, onLogin, onLogout, loading }) {
 
   if (user) {
     return (
-      <div className="user-section" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-        {user.avatar && (
-          <img 
-            src={user.avatar} 
-            alt="Profile" 
-            className="user-avatar"
-            style={{ width: '24px', height: '24px' }}
-          />
-        )}
-        <div>
-          <div className="user-display-name" style={{ fontSize: '14px', fontWeight: '700' }}>
-            {user.displayName}
-          </div>
-          <div className="user-handle" style={{ fontSize: '12px' }}>
-            @{user.handle}
-          </div>
-        </div>
-        <button onClick={onLogout} className="btn btn-danger btn-sm">
-          ログアウト
-        </button>
-      </div>
+      <button onClick={onLogout} className="btn btn-danger btn-sm">
+        ログアウト
+      </button>
     )
   }