botrun-horse 2.30.0 → 2.34.0

package/botrun-c/web/components/ChatPage.tsx

@@ -1,1736 +0,0 @@
-
-"use client";
-
-import { useState, useEffect, useRef } from "react";
-import { ChatMessage, type Message } from "@/components/chat-message";
-import { ChatInput } from "@/components/chat-input";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { LogOut, MoreVertical, MessageSquarePlus, Sparkles, Copy, Check, Mail, Star, Info, UserX, RefreshCw, User, Hammer, Trash2, Brain, ChevronDown, FolderSync, Plus, History, Github, GitBranch, Link2, Unlink, FolderGit2, Search, X, AlertCircle, Download, CheckCircle2 } from "lucide-react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import Image from "next/image";
-import { useAuth } from "@/contexts/AuthContext";
-import { useToast } from "@/hooks/use-toast";
-import { Button } from "@/components/ui/button";
-import { useAutoWelcome } from "@/hooks/useAutoWelcome";
-import { useCapacitorPlatform } from "@/hooks/useCapacitorPlatform";
-import { useScrollToBottom } from "@/hooks/useScrollToBottom";
-import { useAppStoreUpdate, openAppStore } from "@/hooks/useAppStoreUpdate";
-import { useUserPlan } from "@/hooks/useUserPlan";
-import { ScrollToBottomButton } from "@/components/scroll-to-bottom-button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu";
-import { BotrunIncubator } from "@/components/botrun-incubator";
-import { SkillsManagerDrawer } from "@/components/skills-manager-drawer";
-import { SkillsEditor } from "@/components/skills-editor";
-import { GdriveAddDialog } from "@/components/gdrive/gdrive-add-dialog";
-import { useGdriveFolders } from "@/hooks/useGdriveFolders";
-import { useGdriveSync } from "@/hooks/useGdriveSync";
-import { useGitHub } from "@/hooks/useGitHub";
-import { useAuthToken } from "@/hooks/useAuthToken";
-import { useClaudeModel, type ClaudeModelId } from "@/hooks/useClaudeModel";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { getApiUrl } from '@/lib/api-url';
-import {
-  saveSessionId,
-  loadSessionId,
-  clearSessionId,
-  saveMessages,
-  loadMessages,
-  clearMessages,
-  clearAllUserData,
-} from '@/lib/conversation-storage';
-import { copyAllMessages } from '@/lib/clipboard-utils';
-import { ConversationList } from '@/components/ConversationList';
-import { useConversations } from '@/hooks/useConversations';
-import { useConversation } from '@/hooks/useConversation';
-import type { Conversation } from '@/types/conversation';
-
-// API URL - 使用統一的 API URL 邏輯
-const API_URL = (() => {
-  if (typeof window === 'undefined') return '';
-
-  // Capacitor (iOS/Android App) - 必須檢查 isNativePlatform()
-  // ⚠️ window.Capacitor 在 web 環境也會存在，需要額外判斷
-  const capacitor = (window as any).Capacitor;
-  if (capacitor && capacitor.isNativePlatform && capacitor.isNativePlatform()) {
-    // 真正的 Native App 環境：使用環境變數或預設 Cloud Run URL
-    return process.env.NEXT_PUBLIC_API_URL || 'https://botrun-c-257949799705.asia-east1.run.app';
-  }
-
-  // Next.js Dev Server (localhost:3000) - 使用 lib/api-url.ts 的統一邏輯
-  // 本地開發：前端在 3000，API 在 8080
-  const currentPort = window.location.port;
-  if (currentPort === '3000') {
-    console.log('🔍 [ChatPage] Detected Next.js dev server (port 3000), using: http://localhost:8080');
-    return 'http://localhost:8080';
-  }
-
-  // Load Balancer 架構：檢查是否在個人後端 (/u/{hash}/)
-  const pathname = window.location.pathname;
-  if (pathname.startsWith('/u/')) {
-    // 提取 /u/{hash}/ 前綴 (hash 是 8 位 16 進制)
-    const match = pathname.match(/^\/u\/[0-9a-f]{8}/);
-    if (match) {
-      console.log('🔍 [ChatPage] Detected personal backend path:', match[0]);
-      return match[0];  // 例如: /u/53288a47
-    }
-  }
-
-  // 使用環境變數設定的 API URL（如果有的話）
-  if (process.env.NEXT_PUBLIC_API_URL) {
-    return process.env.NEXT_PUBLIC_API_URL;
-  }
-
-  // 統一前端或其他情況：使用相對路徑（空字串）
-  return '';
-})();
-
-// Debug: Log environment
-if (typeof window !== 'undefined') {
-  console.log('🔍 [ChatPage] Environment:', {
-    isCapacitor: !!(window as any).Capacitor,
-    API_URL,
-    userAgent: navigator.userAgent
-  });
-}
-
-function log(message: string, data?: any) {
-  const timestamp = new Date().toLocaleTimeString("zh-TW");
-  if (data) {
-    console.log(`[${timestamp}] 🌐 ${message}`, data);
-  } else {
-    console.log(`[${timestamp}] 🌐 ${message}`);
-  }
-}
-
-// 轉錄模型選項
-const TRANSCRIPTION_MODELS = [
-  { id: 'whisper-local', name: 'Whisper v3 Turbo (本地)', description: '本地 MLX Whisper，物理隔離，Apple Silicon 優化' },
-  { id: 'whisper-Breeze-ASR-25', name: 'Whisper Breeze ASR 2.5 (國網中心)', description: '台灣國網中心優化版本，適合中文' },
-  { id: 'Whisper-Large-V3', name: 'Whisper Large V3 (國網中心)', description: 'OpenAI 大型模型，支援多語言' },
-  { id: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro (Google)', description: 'Google 最新模型，高準確度' },
-] as const;
-
-export type TranscriptionModel = typeof TRANSCRIPTION_MODELS[number]['id'];
-
-// 雲端模型（需要網路）
-const CLOUD_MODELS: TranscriptionModel[] = ['whisper-Breeze-ASR-25', 'Whisper-Large-V3', 'gemini-2.5-pro'];
-
-// 本地模型（物理隔離）
-const LOCAL_MODELS: TranscriptionModel[] = ['whisper-local'];
-
-export function ChatPage() {
-  const { user, signOut } = useAuth();
-  const { toast } = useToast();
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [sessionId, setSessionId] = useState<string | undefined>();
-  const [isStopping, setIsStopping] = useState(false);
-  const [streamingMessageId, setStreamingMessageId] = useState<string | null>(null);
-  const [isIncubatorOpen, setIsIncubatorOpen] = useState(false);
-  const [isSkillsDrawerOpen, setIsSkillsDrawerOpen] = useState(false);
-  // 選單折疊狀態
-  const [menuSections, setMenuSections] = useState({
-    chat: false,
-    incubator: false,
-    gdrive: false,
-    github: false,
-    model: false,
-    about: false,
-  });
-  const [isGdriveAddDialogOpen, setIsGdriveAddDialogOpen] = useState(false);
-  const [skillsEditorOpen, setSkillsEditorOpen] = useState(false);
-  const [skillToEdit, setSkillToEdit] = useState<{ id: string; name: string; description: string; icon: string; source: "official" | "user"; editable: boolean } | null>(null);
-  const [clearFilesDialogOpen, setClearFilesDialogOpen] = useState(false);
-  const [fileStats, setFileStats] = useState<{ uploads: { count: number; size: number }; pdfPages: { count: number; size: number }; total: { count: number; size: number } } | null>(null);
-  const [isClearingFiles, setIsClearingFiles] = useState(false);
-  const [isLoadingStats, setIsLoadingStats] = useState(false);
-  // 🗂️ 對話歷史狀態
-  const [isConversationListOpen, setIsConversationListOpen] = useState(false);
-  const [currentConversationId, setCurrentConversationId] = useState<string | undefined>();
-
-  // 🎯 根據 ?local=true 決定預設轉錄模型
-  const [transcriptionModel, setTranscriptionModel] = useState<TranscriptionModel>(() => {
-    if (typeof window === 'undefined') return 'whisper-Breeze-ASR-25';
-    const searchParams = new URLSearchParams(window.location.search);
-    const isLocalMode = searchParams.get('local') === 'true';
-    return isLocalMode ? 'whisper-local' : 'whisper-Breeze-ASR-25';
-  });
-  const [isCopiedAll, setIsCopiedAll] = useState(false);
-  const [isSharingEmail, setIsSharingEmail] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const scrollAreaRef = useRef<HTMLDivElement>(null);
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  // 偵測 Capacitor 平台
-  const { isCapacitor, isIOS, isAndroid, platform, getBottomPadding } = useCapacitorPlatform();
-
-  // 🎯 檢查 App 更新（iOS/Android）
-  const { updateAvailable, latestVersion, hasSeenUpdateNotification, markUpdateAsSeen } = useAppStoreUpdate();
-
-  // 🎯 取得使用者訂閱方案
-  const { planName, isLoading: isPlanLoading, refetch: refetchUserPlan } = useUserPlan(user);
-
-  // 🧠 Claude 模型選擇（Haiku 4.5 / Sonnet 4）
-  const { currentModel: claudeModel, setModel: setClaudeModel, models: claudeModels, getModelInfo } = useClaudeModel();
-
-  // 🎯 取得 Auth Token（用於 Google Drive 等需要認證的功能）
-  const { token: authToken } = useAuthToken();
-
-  // 🗂️ Google Drive 相關 hooks
-  const {
-    folders: gdriveFolders,
-    history: gdriveHistory,
-    isLoading: isGdriveFoldersLoading,
-    addFolder: addGdriveFolder,
-    removeFolder: removeGdriveFolder,
-    toggleSelect: toggleGdriveSelect,
-    refetch: refetchGdriveFolders,
-  } = useGdriveFolders(authToken || undefined);
-
-  const {
-    isSyncing: isGdriveSyncing,
-    syncAll: syncAllGdrive,
-  } = useGdriveSync(authToken || undefined);
-
-  // 🐙 GitHub 整合
-  const {
-    connected: isGitHubConnected,
-    loading: isGitHubLoading,
-    connectedRepos,
-    availableRepos,
-    connect: connectGitHub,
-    disconnect: disconnectGitHub,
-    cloneRepo: cloneGitHubRepo,
-    syncRepo: syncGitHubRepo,
-    deleteRepo: deleteGitHubRepo,
-    refresh: refreshGitHub,
-  } = useGitHub(authToken || undefined);
-  const [syncingRepoName, setSyncingRepoName] = useState<string | null>(null);
-  const [cloningRepoName, setCloningRepoName] = useState<string | null>(null);
-  const [deletingRepoName, setDeletingRepoName] = useState<string | null>(null);
-  const [showGitHubReposModal, setShowGitHubReposModal] = useState(false);
-
-  // 🐙 GitHub 連結回調處理（從 GitHub OAuth 跳轉回來時）
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    const urlParams = new URLSearchParams(window.location.search);
-    const githubConnected = urlParams.get('github_connected');
-    const githubError = urlParams.get('github_error');
-
-    if (githubConnected === 'true') {
-      toast({
-        title: '✅ GitHub 連結成功',
-        description: '現在可以管理你的 Repository 了',
-      });
-      // 清除 URL 參數
-      window.history.replaceState({}, '', window.location.pathname);
-      // 重新載入 GitHub 狀態
-      refreshGitHub();
-    } else if (githubError) {
-      const errorMessages: Record<string, string> = {
-        missing_state: '連結參數遺失，請重新連結',
-        invalid_state: '連結已過期，請重新連結',
-        invalid_installation: 'GitHub App 安裝驗證失敗',
-        install_failed: 'GitHub 連結失敗，請重試',
-      };
-      toast({
-        title: '❌ GitHub 連結失敗',
-        description: errorMessages[githubError] || '未知錯誤',
-        variant: 'destructive',
-      });
-      // 清除 URL 參數
-      window.history.replaceState({}, '', window.location.pathname);
-    }
-  }, [toast, refreshGitHub]);
-
-  // 🗂️ 對話歷史 hooks
-  const {
-    conversations,
-    isLoading: isConversationsLoading,
-    error: conversationsError,
-    refetch: refetchConversations,
-    updateTitle: updateConversationTitle,
-    deleteConversation,
-  } = useConversations(authToken || undefined);
-
-  const {
-    conversation: selectedConversation,
-    messages: selectedMessages,
-    isLoading: isSelectedConversationLoading,
-  } = useConversation(authToken || undefined, currentConversationId);
-
-  // Debug: 顯示當前平台和底部間距
-  useEffect(() => {
-    console.log('🔍 [ChatPage] Platform detection result:', {
-      platform,
-      isCapacitor,
-      bottomPadding: getBottomPadding(),
-      buttonBottom: getBottomPadding('6rem'),
-    });
-  }, [platform, isCapacitor, getBottomPadding]);
-
-  // 🔄 頁面載入時恢復 sessionId 和 messages（避免閒置後失憶）
-  useEffect(() => {
-    if (!user) return;
-
-    // 恢復 sessionId
-    const savedSessionId = loadSessionId(user.uid);
-    if (savedSessionId) {
-      setSessionId(savedSessionId);
-      log('🔄 Restored sessionId from localStorage');
-    }
-
-    // 恢復 messages（可選，快速恢復對話內容）
-    const savedMessages = loadMessages(user.uid);
-    if (savedMessages && savedMessages.length > 0) {
-      setMessages(savedMessages);
-      log(`🔄 Restored ${savedMessages.length} messages from localStorage`);
-    }
-  }, [user]); // 只在 user 變更時執行一次
-
-  // 💾 自動儲存 sessionId（每次變更時）
-  useEffect(() => {
-    if (!user || !sessionId) return;
-
-    saveSessionId(user.uid, sessionId);
-  }, [user, sessionId]);
-
-  // 💾 自動儲存 messages（可選，debounce 避免過度寫入）
-  useEffect(() => {
-    if (!user || messages.length === 0) return;
-
-    // 使用 setTimeout debounce（5 秒後才存）
-    const timeoutId = setTimeout(() => {
-      saveMessages(user.uid, messages);
-    }, 5000);
-
-    return () => clearTimeout(timeoutId);
-  }, [user, messages]);
-
-  // 歡迎訊息 hook
-  const { welcomeMessage, shouldShowWelcome } = useAutoWelcome(messages);
-
-  // 智慧捲動 hook
-  const { isAtBottom, scrollToBottom, handleScroll, checkIsAtBottom } = useScrollToBottom({
-    scrollContainerRef: scrollAreaRef,
-    scrollTargetRef: messagesEndRef,
-  });
-
-  // 🎯 取消自動捲動功能 - 使用者需手動滾動查看新內容
-  // 保留浮動按鈕，讓使用者可以隨時跳回底部
-  // useEffect(() => {
-  //   if (isAtBottom) {
-  //     scrollToBottom();
-  //   }
-  // }, [messages, isAtBottom, scrollToBottom]);
-
-  // 🎯 當內容變化時，檢查是否需要顯示浮動按鈕
-  // 當 AI 生成內容超過視窗高度時，自動顯示按鈕提醒使用者
-  useEffect(() => {
-    // 多次檢查，確保捕捉到內容超過視窗的時刻
-    // 因為 DOM 更新和渲染需要時間，單次檢查可能不準確
-    const timers = [
-      setTimeout(() => checkIsAtBottom(), 50),   // 第一次快速檢查
-      setTimeout(() => checkIsAtBottom(), 150),  // 第二次檢查
-      setTimeout(() => checkIsAtBottom(), 300),  // 第三次檢查（確保 smooth scroll 完成）
-    ];
-    return () => timers.forEach(timer => clearTimeout(timer));
-  }, [messages, checkIsAtBottom]);
-
-
-  const handleStopResponse = () => {
-    log("🛑 User requested to stop the response");
-    setIsStopping(true);
-
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      log("🛑 AbortController signal sent");
-    }
-
-    // Reset states after a short delay to allow cleanup
-    setTimeout(() => {
-      setIsLoading(false);
-      setIsStopping(false);
-      abortControllerRef.current = null;
-    }, 500);
-  };
-
-  // 技能編輯處理函數
-  const handleEditSkill = (skill: { id: string; name: string; description: string; icon: string; source: "official" | "user"; editable: boolean }) => {
-    setSkillToEdit(skill);
-    setIsSkillsDrawerOpen(false);
-    setSkillsEditorOpen(true);
-  };
-
-  const handleCreateSkill = () => {
-    setSkillToEdit(null);
-    setIsSkillsDrawerOpen(false);
-    setSkillsEditorOpen(true);
-  };
-
-  const handleSkillsChange = () => {
-    // Skills 變更後的回呼（目前僅關閉 drawer 即可）
-  };
-
-  // 清除檔案功能
-  const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
-  };
-
-  const handleOpenClearFilesDialog = async () => {
-    if (!user) return;
-
-    setIsLoadingStats(true);
-    setClearFilesDialogOpen(true);
-
-    try {
-      const token = await user.getIdToken();
-      const apiUrl = getApiUrl();
-      const response = await fetch(`${apiUrl}/api/files/stats?projectId=default`, {
-        headers: {
-          'Authorization': `Bearer ${token}`,
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to get file stats');
-      }
-
-      const data = await response.json();
-      setFileStats(data.stats);
-      log('📊 File stats loaded:', data.stats);
-    } catch (error) {
-      console.error('Failed to load file stats:', error);
-      toast({
-        title: "載入失敗",
-        description: "無法取得檔案統計資訊",
-        variant: "destructive",
-      });
-      setClearFilesDialogOpen(false);
-    } finally {
-      setIsLoadingStats(false);
-    }
-  };
-
-  const handleClearFiles = async () => {
-    if (!user) return;
-
-    setIsClearingFiles(true);
-
-    try {
-      const token = await user.getIdToken();
-      const apiUrl = getApiUrl();
-      const response = await fetch(`${apiUrl}/api/files/clear?projectId=default`, {
-        method: 'DELETE',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to clear files');
-      }
-
-      const data = await response.json();
-      log('🗑️ Files cleared:', data);
-
-      toast({
-        title: "清除完成",
-        description: data.message || `已清除 ${data.totalDeleted} 個檔案`,
-        duration: 2000,
-      });
-
-      setClearFilesDialogOpen(false);
-      setFileStats(null);
-    } catch (error) {
-      console.error('Failed to clear files:', error);
-      toast({
-        title: "清除失敗",
-        description: "無法清除檔案，請稍後再試",
-        variant: "destructive",
-      });
-    } finally {
-      setIsClearingFiles(false);
-    }
-  };
-
-  const handleNewChat = () => {
-    // 1. 清空 sessionId（讓下次請求建立新 session）
-    setSessionId(undefined);
-
-    // 2. 清空所有訊息
-    setMessages([]);
-
-    // 3. 清空 localStorage（避免恢復舊對話）
-    if (user) {
-      clearSessionId(user.uid);
-      clearMessages(user.uid);
-      log('🗑️  Cleared localStorage for new chat');
-    }
-
-    // 4. 重置其他狀態（保險起見）
-    setIsLoading(false);
-    setIsStopping(false);
-    abortControllerRef.current = null;
-
-    // 5. 清空當前對話 ID（歷史對話功能）
-    setCurrentConversationId(undefined);
-
-    // 6. 歡迎訊息會自動重新顯示（因為 shouldShowWelcome = messages.length === 0）
-  };
-
-  // 🗂️ 選擇歷史對話
-  const handleSelectConversation = (conversation: Conversation) => {
-    log(`🗂️ Selected conversation: ${conversation.id} - ${conversation.title}`);
-
-    // 設定當前對話 ID（觸發 useConversation hook 載入訊息）
-    setCurrentConversationId(conversation.id);
-
-    // 設定 sessionId 以便繼續對話
-    if (conversation.sessionId) {
-      setSessionId(conversation.sessionId);
-      if (user) {
-        saveSessionId(user.uid, conversation.sessionId);
-      }
-    }
-  };
-
-  // 🗂️ 當選擇的對話訊息載入完成後，更新 messages 狀態
-  useEffect(() => {
-    if (selectedMessages && selectedMessages.length > 0 && currentConversationId) {
-      // 將 API 回傳的訊息轉換為本地 Message 格式
-      const convertedMessages: Message[] = selectedMessages.map((msg) => ({
-        id: msg.id,
-        role: msg.role,
-        content: msg.content,
-        timestamp: new Date(msg.timestamp),
-        toolUses: msg.toolUses?.map((tu) => ({
-          toolId: tu.id,
-          toolName: tu.name,
-          toolInput: tu.input,
-          toolOutput: tu.output,
-        })),
-      }));
-
-      setMessages(convertedMessages);
-      log(`🗂️ Loaded ${convertedMessages.length} messages from conversation ${currentConversationId}`);
-
-      // 同時更新 localStorage
-      if (user) {
-        saveMessages(user.uid, convertedMessages);
-      }
-    }
-  }, [selectedMessages, currentConversationId, user]);
-
-  const handleSignOut = async () => {
-    // 登出前清除所有使用者資料
-    if (user) {
-      clearAllUserData(user.uid);
-      log('🗑️  Cleared all user data before sign out');
-    }
-
-    // 執行 Firebase 登出
-    await signOut();
-  };
-
-  const handleCopyAllMessages = async () => {
-    if (messages.length === 0) return;
-
-    try {
-      await copyAllMessages(messages);
-      setIsCopiedAll(true);
-      setTimeout(() => setIsCopiedAll(false), 2000);
-      console.log('✅ All messages copied to clipboard (plain text + HTML)');
-    } catch (error) {
-      console.error('❌ Copy all failed:', error);
-    }
-  };
-
-  const handleShareToEmail = async () => {
-    if (messages.length === 0) {
-      toast({
-        title: "無對話記錄",
-        description: "目前沒有對話可以分享",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    if (!user) {
-      toast({
-        title: "請先登入",
-        description: "需要登入才能使用 Email 分享功能",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    setIsSharingEmail(true);
-
-    try {
-      // 取得 Firebase Auth Token
-      const token = await user.getIdToken();
-
-      // 準備 API 請求資料
-      const apiUrl = getApiUrl();
-      const response = await fetch(`${apiUrl}/api/share-conversation`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          messages: messages.map(msg => ({
-            role: msg.role,
-            content: msg.content,
-          })),
-          title: `波特人對話記錄 - ${new Date().toLocaleDateString('zh-TW')}`,
-        }),
-      });
-
-      const data = await response.json();
-
-      if (!response.ok) {
-        throw new Error(data.error || '發送失敗');
-      }
-
-      // 成功 - 0.8 秒後自動消失
-      toast({
-        title: "📧 Email 已發送",
-        description: `對話記錄已發送到您的信箱 (${user.email})`,
-        duration: 800,
-      });
-
-      log('✅ Conversation shared to email successfully', { email: user.email });
-    } catch (error) {
-      console.error('❌ Share to email failed:', error);
-      toast({
-        title: "發送失敗",
-        description: error instanceof Error ? error.message : '無法發送 Email，請稍後再試',
-        variant: "destructive",
-      });
-    } finally {
-      setIsSharingEmail(false);
-    }
-  };
-
-  const handleOpenUrl = async (url: string, logPrefix: string) => {
-    log(`${logPrefix} Opening: ${url}`);
-
-    try {
-      // 判斷是否為 native 平台（iOS/Android）
-      const isNative = (window as any).Capacitor?.isNativePlatform?.() || false;
-
-      if (isNative) {
-        // Native 環境：使用 _system 在外部瀏覽器開啟
-        // Capacitor 的 WebView 會自動處理 _system target
-        window.open(url, '_system');
-        log("✅ Opened URL in external browser (Native)");
-      } else {
-        // 網頁環境：在新分頁開啟
-        window.open(url, '_blank');
-        log("✅ Opened URL in new tab (Web)");
-      }
-    } catch (error) {
-      log(`❌ Error opening URL:`, error);
-      console.error("Error opening URL:", error);
-    }
-  };
-
-  const handleFeatures = async () => {
-    await handleOpenUrl('https://app.botrun.ai/intro/', '✨');
-  };
-
-  const handleAbout = async () => {
-    await handleOpenUrl('https://app.botrun.ai/intro/index.html#contact', 'ℹ️');
-  };
-
-  const handleDeleteAccount = async () => {
-    await handleOpenUrl('https://app.botrun.ai/delete-account/', '🗑️');
-  };
-
-  const handleSendMessage = async (content: string) => {
-    if (!content.trim()) return;
-
-    const requestId = `req-${Date.now()}`;
-    log(`📤 [${requestId}] Sending message:`, { content, sessionId });
-
-    const userMessage: Message = {
-      id: `user-${Date.now()}`,
-      role: "user",
-      content,
-      timestamp: new Date(),
-    };
-    setMessages((prev) => [...prev, userMessage]);
-    setIsLoading(true);
-
-    // ✨ 自動重試機制：最多重試 1 次，使用者無需知道重試過程
-    const MAX_RETRIES = 1;
-    let lastError: Error | null = null;
-
-    for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
-      // 重試時記錄 log（使用者看不到）
-      if (attempt > 0) {
-        log(`🔄 [${requestId}] Auto-retry attempt ${attempt}/${MAX_RETRIES}...`);
-        console.warn(`🔄 [${requestId}] Auto-retrying after transient error:`, lastError?.message);
-      }
-
-      try {
-        const assistantMessageId = `assistant-${Date.now()}`;
-        const assistantMessage: Message = {
-          id: assistantMessageId,
-          role: "assistant",
-          content: "",
-          timestamp: new Date(),
-        };
-
-        // 重試時需要先移除上一次失敗的空 assistant message
-        if (attempt > 0) {
-          setMessages((prev) => {
-            // 移除最後一個空的 assistant message（如果有的話）
-            const lastMsg = prev[prev.length - 1];
-            if (lastMsg && lastMsg.role === 'assistant' && !lastMsg.content) {
-              return [...prev.slice(0, -1), assistantMessage];
-            }
-            return [...prev, assistantMessage];
-          });
-        } else {
-          setMessages((prev) => [...prev, assistantMessage]);
-        }
-        setStreamingMessageId(assistantMessageId); // 開始串流
-
-        // Create new AbortController for this request
-        const abortController = new AbortController();
-        abortControllerRef.current = abortController;
-
-        log(`📡 [${requestId}] Making API request to ${API_URL}/api/chat (attempt ${attempt + 1}/${MAX_RETRIES + 1})`);
-
-        // ✨ 檢查 URL 參數 ?local=true（LM Studio 物理隔離模式）
-        const searchParams = new URLSearchParams(window.location.search);
-        const useLMStudio = searchParams.get('local') === 'true';
-
-        // Get Firebase ID token for authentication
-        // 🔧 物理隔離模式：使用假 token，不需要網路
-        let idToken: string;
-        if (useLMStudio) {
-          idToken = 'local-mode-no-auth-needed';
-          log(`🔧 [${requestId}] Physical isolation mode - using fake token (no network required)`);
-        } else {
-          if (!user) {
-            throw new Error("User not authenticated");
-          }
-          idToken = await user.getIdToken();
-          log(`🔐 [${requestId}] ID Token obtained, length: ${idToken?.length || 0}`);
-        }
-
-        // Debug: 顯示當前 URL 和模式
-        log(`🔍 [${requestId}] URL: ${window.location.href}`);
-        log(`🔍 [${requestId}] URL params:`, Object.fromEntries(searchParams.entries()));
-
-        if (useLMStudio) {
-          log(`🔧 [${requestId}] ✅ LM Studio mode enabled (URL: ?local=true)`);
-        } else {
-          log(`🤖 [${requestId}] ✅ Claude Agent SDK mode (default)`);
-        }
-
-        const response = await fetch(`${API_URL}/api/chat`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${idToken}`,
-          },
-          body: JSON.stringify({
-            message: content,
-            sessionId,
-            useLMStudio, // ✨ 傳遞給後端
-            claudeModel, // 🧠 使用者選擇的 Claude 模型
-          }),
-          signal: abortController.signal,
-        });
-
-        log(`✅ [${requestId}] Response received, status: ${response.status}`);
-
-        // Handle Rate Limit Error (429) - 不重試，直接顯示錯誤
-        if (response.status === 429) {
-          const errorData = await response.json();
-          log(`⚠️  [${requestId}] Rate limit exceeded:`, errorData);
-
-          // 直接使用後端提供的完整錯誤訊息（包含所有詳細資訊和升級方案）
-          const errorMessage = errorData.message || '請求過於頻繁，請稍後再試';
-
-          // 在聊天中顯示錯誤訊息
-          const errorMessageObj: Message = {
-            id: `error-${Date.now()}`,
-            role: "assistant",
-            content: errorMessage,  // 直接使用後端組合好的完整訊息
-            timestamp: new Date(),
-          };
-
-          setMessages((prev) => [...prev.slice(0, -1), errorMessageObj]); // 移除空的 assistant message
-          setIsLoading(false);
-          setStreamingMessageId(null);
-          return; // 429 錯誤不重試
-        }
-
-        if (!response.ok) {
-          log(`❌ [${requestId}] HTTP error! status: ${response.status}`);
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-
-        const reader = response.body?.getReader();
-        const decoder = new TextDecoder();
-
-        if (!reader) {
-          log(`❌ [${requestId}] No reader available`);
-          throw new Error("No reader available");
-        }
-
-        log(`🔄 [${requestId}] Starting to read SSE stream...`);
-
-        let buffer = "";
-        let assistantContent = "";
-        let eventCount = 0;
-        let textChunkCount = 0;
-
-        while (true) {
-          const { done, value } = await reader.read();
-
-          if (done) {
-            // Removed: log(`🏁 [${requestId}] Stream finished - Events: ${eventCount}, Text chunks: ${textChunkCount}, Total chars: ${assistantContent.length}`);
-            break;
-          }
-
-          buffer += decoder.decode(value, { stream: true });
-          const lines = buffer.split("\n");
-          buffer = lines.pop() || "";
-
-          for (const line of lines) {
-            if (line.startsWith("data: ")) {
-              eventCount++;
-              try {
-                const data = JSON.parse(line.slice(6));
-
-                if (data.sessionId) {
-                  log(`🆔 [${requestId}] Got session ID: ${data.sessionId}`);
-                  setSessionId(data.sessionId);
-                }
-
-                if (data.text) {
-                  assistantContent += data.text;
-                  textChunkCount++;
-                  setMessages((prev) =>
-                    prev.map((msg) =>
-                      msg.id === assistantMessageId
-                        ? { ...msg, content: assistantContent }
-                        : msg
-                    )
-                  );
-                }
-
-                if (data.toolName && data.toolId) {
-                  log(`🔧 [${requestId}] Tool usage: ${data.toolName} (${data.toolId})`);
-                  setMessages((prev) =>
-                    prev.map((msg) =>
-                      msg.id === assistantMessageId
-                        ? {
-                            ...msg,
-                            toolUses: [
-                              ...(msg.toolUses || []),
-                              {
-                                toolId: data.toolId,
-                                toolName: data.toolName,
-                                toolInput: data.toolInput,
-                              },
-                            ],
-                          }
-                        : msg
-                    )
-                  );
-                }
-
-                if (data.toolOutput !== undefined && data.toolId) {
-                  log(`📤 [${requestId}] Tool output received for ${data.toolId}`);
-                  setMessages((prev) =>
-                    prev.map((msg) =>
-                      msg.id === assistantMessageId && msg.toolUses
-                        ? {
-                            ...msg,
-                            toolUses: msg.toolUses.map((tu) =>
-                              tu.toolId === data.toolId
-                                ? { ...tu, toolOutput: data.toolOutput, isError: data.isError }
-                                : tu
-                            ),
-                          }
-                        : msg
-                    )
-                  );
-                }
-
-                if (data.token && data.fileName) {
-                  log(`📥 [${requestId}] Download ready: ${data.fileName}`);
-                  setMessages((prev) =>
-                    prev.map((msg) =>
-                      msg.id === assistantMessageId
-                        ? {
-                            ...msg,
-                            downloadToken: data.token,
-                            downloadFileName: data.fileName,
-                          }
-                        : msg
-                    )
-                  );
-                }
-
-                if (data.success) {
-                  log(`✅ [${requestId}] Conversation completed`);
-                }
-
-                if (data.error) {
-                  log(`❌ [${requestId}] Error: ${data.error}`);
-                }
-
-                // 🔍 Handle debug info from backend (removed to reduce console noise)
-                // if (data.type === 'debug') {
-                //   console.log(`🔍 [Backend Debug] ${data.message}`, data.details);
-                // }
-              } catch (e) {
-                log(`❌ [${requestId}] Error parsing SSE data:`, e);
-                console.error("Error parsing SSE data:", e);
-              }
-            }
-          }
-        }
-
-        // ✅ 成功完成，執行 cleanup 並結束
-        if (attempt > 0) {
-          log(`✅ [${requestId}] Auto-retry succeeded on attempt ${attempt + 1}`);
-        }
-        setIsLoading(false);
-        setIsStopping(false);
-        setStreamingMessageId(null);
-        abortControllerRef.current = null;
-        return; // 成功，結束函數
-
-      } catch (error) {
-        // Check if error is due to abort - 不重試
-        if (error instanceof Error && error.name === 'AbortError') {
-          log(`⏹️ [${requestId}] Request was stopped by user`);
-          setMessages((prev) => [
-            ...prev,
-            {
-              id: `info-${Date.now()}`,
-              role: "assistant",
-              content: "⏹️ Response was stopped by user.",
-              timestamp: new Date(),
-            },
-          ]);
-          setIsLoading(false);
-          setIsStopping(false);
-          setStreamingMessageId(null);
-          abortControllerRef.current = null;
-          return; // AbortError 不重試
-        }
-
-        // 記錄錯誤（供開發者除錯）
-        log(`❌ [${requestId}] Error on attempt ${attempt + 1}/${MAX_RETRIES + 1}:`, error);
-        if (error instanceof Error) {
-          console.error(`❌ [${requestId}] Error name:`, error.name);
-          console.error(`❌ [${requestId}] Error message:`, error.message);
-        }
-
-        lastError = error instanceof Error ? error : new Error(String(error));
-
-        // 如果還有重試次數，繼續迴圈（不顯示錯誤給使用者）
-        if (attempt < MAX_RETRIES) {
-          log(`🔄 [${requestId}] Will retry... (${MAX_RETRIES - attempt} attempts remaining)`);
-          // 短暫延遲後重試（避免立即重試）
-          await new Promise(resolve => setTimeout(resolve, 500));
-          continue;
-        }
-
-        // 所有重試都失敗了，顯示錯誤給使用者
-        log(`❌ [${requestId}] All retry attempts exhausted. Showing error to user.`);
-        console.error("❌ [ChatPage] Full error after all retries:", lastError);
-        if (lastError) {
-          console.error('❌ Error stack:', lastError.stack);
-        }
-
-        setMessages((prev) => [
-          ...prev,
-          {
-            id: `error-${Date.now()}`,
-            role: "assistant",
-            content: "連線出現問題，請聯絡客服夥伴",
-            timestamp: new Date(),
-          },
-        ]);
-      }
-    }
-
-    // finally 邏輯移到這裡（確保無論成功或失敗都會執行）
-    setIsLoading(false);
-    setIsStopping(false);
-    setStreamingMessageId(null); // 結束串流
-    abortControllerRef.current = null;
-  };
-
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <div
-      className="flex w-full flex-col bg-background"
-      style={isCapacitor ? {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: '100vh',
-        overflow: 'hidden'
-      } : {
-        height: '100dvh',
-        minHeight: '-webkit-fill-available'
-      }}
-    >
-      {/* Capacitor App: Status Bar 背景遮蔽 - 解決 Android 13+ setBackgroundColor 失效問題 */}
-      {isCapacitor && (
-        <div
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            height: 'var(--safe-area-inset-top)',
-            backgroundColor: '#F0EBE3', // 榻榻米色
-            zIndex: 40, // 低於選單按鈕 (z-50)，高於內容
-            pointerEvents: 'none', // 讓點擊事件穿透，不擋到按鈕
-          }}
-        />
-      )}
-
-      {/* Floating Dots Menu */}
-      <DropdownMenu onOpenChange={(open) => {
-        if (open) {
-          // 🔴 開啟選單時，標記使用者已看過更新通知
-          if (updateAvailable && !hasSeenUpdateNotification) {
-            console.log('👁️ [ChatPage] Menu opened, marking update as seen');
-            markUpdateAsSeen();
-          }
-
-          // 🎯 重新查詢使用者方案（帶 3 分鐘快取）
-          refetchUserPlan();
-        }
-      }}>
-        <DropdownMenuTrigger asChild>
-          <div className="fixed right-4 z-50" style={{
-            top: isCapacitor
-              ? 'calc(var(--safe-area-inset-top) + 1rem)'
-              : '1rem'
-          }}>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-10 w-10 rounded-full bg-background/80 backdrop-blur-sm shadow-md hover:bg-background/95 relative"
-            >
-              <MoreVertical className="h-5 w-5" />
-              {/* 🔴 紅點提示：有新版本且尚未查看 */}
-              {updateAvailable && !hasSeenUpdateNotification && (
-                <span className="absolute top-0 right-0 h-3 w-3 rounded-full bg-red-500 border-2 border-background" />
-              )}
-              <span className="sr-only">More options</span>
-            </Button>
-          </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-[min(90vw,384px)] max-h-[80vh] overflow-y-auto">
-          {/* 使用者資訊區塊 */}
-          <div className="flex items-center gap-3 px-2 py-3">
-            {/* 使用者頭像 */}
-            <div className="flex-shrink-0">
-              {user?.photoURL ? (
-                <Image
-                  src={user.photoURL}
-                  alt={user.displayName || 'User'}
-                  width={40}
-                  height={40}
-                  className="rounded-full"
-                />
-              ) : (
-                <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
-                  <User className="h-5 w-5 text-muted-foreground" />
-                </div>
-              )}
-            </div>
-
-            {/* 使用者名稱和 Email */}
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium truncate">
-                {user?.displayName || user?.email?.split('@')[0] || '使用者'}
-                {/* 🎯 顯示方案名稱（如果有） */}
-                {planName && <span className="text-muted-foreground font-normal"> ({planName})</span>}
-              </p>
-              {user?.email && (
-                <p className="text-xs text-muted-foreground truncate">
-                  {user.email}
-                </p>
-              )}
-            </div>
-          </div>
-          <DropdownMenuSeparator />
-
-          {/* 1️⃣ 對話 */}
-          <Collapsible
-            open={menuSections.chat}
-            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, chat: open }))}
-          >
-            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
-              <span className="font-medium">對話</span>
-              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.chat ? 'rotate-180' : ''}`} />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="pl-2">
-              <DropdownMenuItem onClick={handleNewChat} className="cursor-pointer gap-2">
-                <MessageSquarePlus className="h-4 w-4" />
-                <span>新對話</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => {
-                  refetchConversations();
-                  setIsConversationListOpen(true);
-                }}
-                className="cursor-pointer gap-2"
-              >
-                <History className="h-4 w-4" />
-                <span>歷史對話</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={handleShareToEmail}
-                className="cursor-pointer gap-2"
-                disabled={isSharingEmail || messages.length === 0}
-              >
-                <Mail className="h-4 w-4" />
-                <span>{isSharingEmail ? '發送中...' : '分享 Email'}</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={handleCopyAllMessages}
-                className="cursor-pointer gap-2"
-                disabled={messages.length === 0}
-              >
-                {isCopiedAll ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
-                <span>{isCopiedAll ? '已複製' : '複製對話'}</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={handleOpenClearFilesDialog} className="cursor-pointer gap-2">
-                <Trash2 className="h-4 w-4" />
-                <span>清除檔案</span>
-              </DropdownMenuItem>
-            </CollapsibleContent>
-          </Collapsible>
-
-          {/* 2️⃣ 孵化器 */}
-          <Collapsible
-            open={menuSections.incubator}
-            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, incubator: open }))}
-          >
-            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
-              <span className="font-medium">孵化器</span>
-              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.incubator ? 'rotate-180' : ''}`} />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="pl-2">
-              <DropdownMenuItem onClick={() => setIsIncubatorOpen(true)} className="cursor-pointer gap-2">
-                <Sparkles className="h-4 w-4" />
-                <span>指揮家</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setIsSkillsDrawerOpen(true)} className="cursor-pointer gap-2">
-                <Hammer className="h-4 w-4" />
-                <span>技能</span>
-              </DropdownMenuItem>
-            </CollapsibleContent>
-          </Collapsible>
-
-          {/* 3️⃣ GDrive */}
-          <Collapsible
-            open={menuSections.gdrive}
-            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, gdrive: open }))}
-          >
-            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
-              <div className="flex items-center gap-2">
-                <span className="font-medium">GDrive</span>
-                {gdriveFolders.length > 0 && (
-                  <span className="text-xs text-muted-foreground">{gdriveFolders.length} 個</span>
-                )}
-              </div>
-              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.gdrive ? 'rotate-180' : ''}`} />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="pl-2">
-              {/* 資料夾列表 */}
-              {isGdriveFoldersLoading ? (
-                <div className="px-2 py-2 text-xs text-muted-foreground">載入中...</div>
-              ) : gdriveFolders.length === 0 ? (
-                <div className="px-2 py-2 text-xs text-muted-foreground">尚無資料夾</div>
-              ) : (
-                gdriveFolders.slice(0, 3).map((folder) => (
-                  <DropdownMenuItem
-                    key={folder.id}
-                    onClick={() => toggleGdriveSelect(folder.id)}
-                    className="cursor-pointer gap-2"
-                  >
-                    <div className={`w-3 h-3 rounded border flex items-center justify-center ${
-                      folder.selected ? 'bg-primary border-primary' : 'border-input'
-                    }`}>
-                      {folder.selected && <Check className="h-2 w-2 text-primary-foreground" />}
-                    </div>
-                    <span className="truncate flex-1">{folder.alias}</span>
-                  </DropdownMenuItem>
-                ))
-              )}
-              {gdriveFolders.length > 3 && (
-                <div className="px-2 py-1 text-xs text-muted-foreground">
-                  +{gdriveFolders.length - 3} 個資料夾
-                </div>
-              )}
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                onClick={async () => {
-                  try {
-                    await syncAllGdrive();
-                    await refetchGdriveFolders();
-                    toast({ title: "同步完成" });
-                  } catch (err: any) {
-                    toast({ title: "同步失敗", description: err.message, variant: "destructive" });
-                  }
-                }}
-                className="cursor-pointer gap-2"
-                disabled={isGdriveSyncing || gdriveFolders.length === 0}
-              >
-                <RefreshCw className={`h-4 w-4 ${isGdriveSyncing ? 'animate-spin' : ''}`} />
-                <span>{isGdriveSyncing ? '同步中...' : '同步全部'}</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => setIsGdriveAddDialogOpen(true)}
-                className="cursor-pointer gap-2"
-              >
-                <Plus className="h-4 w-4" />
-                <span>新增資料夾</span>
-              </DropdownMenuItem>
-            </CollapsibleContent>
-          </Collapsible>
-
-          {/* 4️⃣ GitHub */}
-          <Collapsible
-            open={menuSections.github}
-            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, github: open }))}
-          >
-            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
-              <div className="flex items-center gap-2">
-                <span className="font-medium">GitHub</span>
-                {isGitHubConnected && connectedRepos.length > 0 && (
-                  <span className="text-xs text-muted-foreground">{connectedRepos.length} 個</span>
-                )}
-              </div>
-              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.github ? 'rotate-180' : ''}`} />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="pl-2">
-              {isGitHubLoading ? (
-                <div className="px-2 py-2 text-xs text-muted-foreground">載入中...</div>
-              ) : !isGitHubConnected ? (
-                <DropdownMenuItem
-                  onClick={() => connectGitHub()}
-                  className="cursor-pointer gap-2"
-                >
-                  <Link2 className="h-4 w-4" />
-                  <span>連結 GitHub</span>
-                </DropdownMenuItem>
-              ) : (
-                <>
-                  {/* 已下載的 Repo 列表（點擊同步，右側可刪除） */}
-                  {connectedRepos.length > 0 && (
-                    <>
-                      <div className="px-2 py-1 text-xs text-muted-foreground font-medium">已下載</div>
-                      {connectedRepos.slice(0, 3).map((repo) => {
-                        const isSyncing = syncingRepoName === repo.repoFullName;
-                        const isDeleting = deletingRepoName === repo.repoFullName;
-                        const isBusy = syncingRepoName !== null || deletingRepoName !== null;
-                        return (
-                          <div key={repo.id} className="flex items-center gap-1 px-2 py-1.5 text-sm hover:bg-accent rounded-sm group">
-                            <button
-                              onClick={async () => {
-                                try {
-                                  setSyncingRepoName(repo.repoFullName);
-                                  await syncGitHubRepo(repo.repoFullName);
-                                  toast({ title: "同步完成", description: `${repo.repoFullName} 已更新至最新版本` });
-                                } catch (err: any) {
-                                  toast({ title: "同步失敗", description: err.message, variant: "destructive" });
-                                } finally {
-                                  setSyncingRepoName(null);
-                                }
-                              }}
-                              className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer disabled:opacity-50"
-                              disabled={isBusy}
-                              title="點擊同步最新版本"
-                            >
-                              {isSyncing || repo.status === 'syncing' ? (
-                                <RefreshCw className="h-4 w-4 shrink-0 animate-spin text-blue-500" />
-                              ) : repo.status === 'error' ? (
-                                <AlertCircle className="h-4 w-4 shrink-0 text-destructive" />
-                              ) : (
-                                <CheckCircle2 className="h-4 w-4 shrink-0 text-green-600" />
-                              )}
-                              <span className="truncate">{repo.repoFullName}</span>
-                              {(isSyncing || repo.status === 'syncing') && <span className="text-xs text-blue-500 shrink-0">同步中</span>}
-                              {repo.status === 'error' && !isSyncing && <span className="text-xs text-destructive shrink-0">錯誤</span>}
-                            </button>
-                            <button
-                              onClick={async (e) => {
-                                e.stopPropagation();
-                                if (!confirm(`確定要移除 ${repo.repoFullName} 嗎？\n\n這會刪除本地下載的檔案，但不會影響 GitHub 上的原始倉庫。`)) return;
-                                try {
-                                  setDeletingRepoName(repo.repoFullName);
-                                  await deleteGitHubRepo(repo.repoFullName);
-                                  toast({ title: "已移除", description: `${repo.repoFullName} 已從本地刪除` });
-                                } catch (err: any) {
-                                  toast({ title: "移除失敗", description: err.message, variant: "destructive" });
-                                } finally {
-                                  setDeletingRepoName(null);
-                                }
-                              }}
-                              className="p-1 opacity-0 group-hover:opacity-100 hover:bg-destructive/10 hover:text-destructive rounded transition-opacity disabled:opacity-50"
-                              disabled={isBusy}
-                              title="移除此 Repository"
-                            >
-                              {isDeleting ? <RefreshCw className="h-3.5 w-3.5 animate-spin" /> : <X className="h-3.5 w-3.5" />}
-                            </button>
-                          </div>
-                        );
-                      })}
-                      {connectedRepos.length > 3 && (
-                        <div className="px-2 py-1 text-xs text-muted-foreground">
-                          +{connectedRepos.length - 3} 個 Repo
-                        </div>
-                      )}
-                    </>
-                  )}
-
-                  {/* 尚未下載的 Repo 列表（點擊下載） */}
-                  {availableRepos.length > 0 && (
-                    <>
-                      {connectedRepos.length > 0 && <DropdownMenuSeparator />}
-                      <div className="px-2 py-1 text-xs text-muted-foreground font-medium">尚未下載 ({availableRepos.length})</div>
-                      {availableRepos.slice(0, 3).map((repo) => {
-                        const isCloning = cloningRepoName === repo.fullName;
-                        const isBusy = cloningRepoName !== null;
-                        return (
-                          <DropdownMenuItem
-                            key={repo.id}
-                            onClick={async () => {
-                              try {
-                                setCloningRepoName(repo.fullName);
-                                toast({ title: "下載中...", description: `正在下載 ${repo.fullName}` });
-                                await cloneGitHubRepo(repo.fullName);
-                                toast({ title: "下載完成", description: `${repo.fullName} 已可在對話中使用` });
-                              } catch (err: any) {
-                                toast({ title: "下載失敗", description: err.message, variant: "destructive" });
-                              } finally {
-                                setCloningRepoName(null);
-                              }
-                            }}
-                            className="cursor-pointer gap-2"
-                            disabled={isBusy}
-                          >
-                            {isCloning ? (
-                              <RefreshCw className="h-4 w-4 animate-spin text-blue-500" />
-                            ) : (
-                              <Download className="h-4 w-4 text-muted-foreground" />
-                            )}
-                            <span className="truncate flex-1">{repo.fullName}</span>
-                          </DropdownMenuItem>
-                        );
-                      })}
-                      {availableRepos.length > 3 && (
-                        <DropdownMenuItem
-                          onClick={() => setShowGitHubReposModal(true)}
-                          className="cursor-pointer gap-2 text-primary"
-                        >
-                          <FolderGit2 className="h-4 w-4" />
-                          <span>查看全部 {availableRepos.length} 個</span>
-                        </DropdownMenuItem>
-                      )}
-                    </>
-                  )}
-
-                  {/* 無任何 Repo 時顯示 */}
-                  {connectedRepos.length === 0 && availableRepos.length === 0 && (
-                    <div className="px-2 py-2 text-xs text-muted-foreground">尚無 Repository</div>
-                  )}
-
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem
-                    onClick={() => connectGitHub()}
-                    className="cursor-pointer gap-2"
-                  >
-                    <Plus className="h-4 w-4" />
-                    <span>新增 Repository</span>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onClick={() => disconnectGitHub()}
-                    className="cursor-pointer gap-2 text-destructive focus:text-destructive"
-                  >
-                    <Unlink className="h-4 w-4" />
-                    <span>中斷連結</span>
-                  </DropdownMenuItem>
-                </>
-              )}
-            </CollapsibleContent>
-          </Collapsible>
-
-          {/* 5️⃣ AI 模型 */}
-          <Collapsible
-            open={menuSections.model}
-            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, model: open }))}
-          >
-            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
-              <div className="flex items-center gap-2">
-                <span className="font-medium">AI 模型</span>
-                <span className="text-xs text-muted-foreground">{getModelInfo()?.name}</span>
-              </div>
-              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.model ? 'rotate-180' : ''}`} />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="px-2 pb-2">
-              <div className="flex gap-1">
-                {claudeModels.map((model) => (
-                  <button
-                    key={model.id}
-                    onClick={() => setClaudeModel(model.id)}
-                    className={`flex-1 px-2 py-1.5 text-xs rounded-md transition-colors ${
-                      claudeModel === model.id
-                        ? 'bg-primary text-primary-foreground'
-                        : 'bg-muted hover:bg-muted/80'
-                    }`}
-                    title={model.description}
-                  >
-                    {model.name}
-                  </button>
-                ))}
-              </div>
-              <p className="text-xs text-muted-foreground mt-1">
-                {getModelInfo()?.description}
-              </p>
-            </CollapsibleContent>
-          </Collapsible>
-
-          {/* 5️⃣ 關於 */}
-          <Collapsible
-            open={menuSections.about}
-            onOpenChange={(open) => setMenuSections(prev => ({ ...prev, about: open }))}
-          >
-            <CollapsibleTrigger className="flex items-center justify-between w-full px-2 py-2 text-sm hover:bg-accent rounded-sm">
-              <span className="font-medium">關於</span>
-              <ChevronDown className={`h-4 w-4 transition-transform ${menuSections.about ? 'rotate-180' : ''}`} />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="pl-2">
-              <DropdownMenuItem onClick={handleFeatures} className="cursor-pointer gap-2">
-                <Star className="h-4 w-4" />
-                <span>特色介紹</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={handleAbout} className="cursor-pointer gap-2">
-                <Info className="h-4 w-4" />
-                <span>聯絡我們</span>
-              </DropdownMenuItem>
-              {/* 版本更新 - 僅在有新版本時顯示 */}
-              {updateAvailable && (
-                <DropdownMenuItem
-                  onClick={async () => { await openAppStore(); }}
-                  className="cursor-pointer gap-2 text-blue-600 dark:text-blue-400"
-                >
-                  <RefreshCw className="h-4 w-4" />
-                  <span>{latestVersion ? `更新 v${latestVersion}` : '版本更新'}</span>
-                </DropdownMenuItem>
-              )}
-            </CollapsibleContent>
-          </Collapsible>
-
-          <DropdownMenuSeparator />
-
-          {/* 刪除帳號 - 僅在 iOS/Android App 中顯示 */}
-          {isCapacitor && (
-            <DropdownMenuItem onClick={handleDeleteAccount} className="cursor-pointer gap-2 text-destructive focus:text-destructive">
-              <UserX className="h-4 w-4" />
-              <span>刪除帳號</span>
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer gap-2">
-            <LogOut className="h-4 w-4" />
-            <span>登出</span>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-
-      <ScrollArea
-        ref={scrollAreaRef}
-        className="flex-1"
-        onScroll={handleScroll}
-        style={{
-          overflow: 'auto',
-          WebkitOverflowScrolling: 'touch',
-          // Capacitor App: 確保內容從 status bar 下方開始
-          ...(isCapacitor && {
-            paddingTop: 'var(--safe-area-inset-top)'
-          })
-        }}
-      >
-        <div className="mx-auto w-full max-w-6xl px-4 md:px-6" style={{
-          paddingTop: isCapacitor ? '1rem' : 'calc(var(--safe-area-inset-top) + 1rem)',
-          paddingBottom: isCapacitor ? '160px' : '120px' // 預留輸入框高度空間
-        }}>
-          {/* 自動顯示歡迎訊息（僅在初次對話前） */}
-          {shouldShowWelcome && messages.length === 0 && (
-            <ChatMessage
-              key={welcomeMessage.id}
-              message={welcomeMessage}
-              onSendMessage={handleSendMessage}
-              isStreaming={false}
-            />
-          )}
-
-          {/* 一般對話訊息 */}
-          {messages.map((message, index) => (
-            <ChatMessage
-              key={message.id}
-              message={message}
-              onSendMessage={handleSendMessage}
-              isStreaming={message.id === streamingMessageId}
-              previousMessage={index > 0 ? messages[index - 1] : undefined}
-            />
-          ))}
-          <div ref={messagesEndRef} />
-        </div>
-      </ScrollArea>
-
-      {/* 浮動「回到底部」按鈕 */}
-      <ScrollToBottomButton
-        visible={!isAtBottom}
-        onClick={scrollToBottom}
-      />
-      <div className="border-t flex-shrink-0 bg-background" style={{
-        paddingBottom: isCapacitor
-          ? isAndroid
-            ? 'max(var(--safe-area-inset-bottom), var(--android-nav-bar-height))'  // Android: 確保至少 48px
-            : 'var(--safe-area-inset-bottom)'  // iOS: 使用系統提供的 safe area
-          : 'var(--safe-area-inset-bottom)'
-      }}>
-        <div className="mx-auto w-full max-w-6xl px-4 md:px-6">
-          <ChatInput
-            onSend={handleSendMessage}
-            onStop={handleStopResponse}
-            disabled={isLoading}
-            isLoading={isLoading}
-            isStopping={isStopping}
-            placeholder=""
-            transcriptionModel={transcriptionModel}
-          />
-        </div>
-      </div>
-
-      {/* 指揮家孵化器 Modal */}
-      <BotrunIncubator
-        open={isIncubatorOpen}
-        onOpenChange={setIsIncubatorOpen}
-        onNewChat={handleNewChat}
-      />
-
-      {/* 技能孵化器 Drawer */}
-      <SkillsManagerDrawer
-        open={isSkillsDrawerOpen}
-        onOpenChange={setIsSkillsDrawerOpen}
-        onEdit={handleEditSkill}
-        onCreate={handleCreateSkill}
-        onSkillsChange={handleSkillsChange}
-      />
-
-      {/* 技能編輯器 */}
-      <SkillsEditor
-        open={skillsEditorOpen}
-        onOpenChange={setSkillsEditorOpen}
-        skill={skillToEdit}
-        onSaved={handleSkillsChange}
-      />
-
-      {/* Google Drive 新增資料夾對話框 */}
-      <GdriveAddDialog
-        open={isGdriveAddDialogOpen}
-        onOpenChange={setIsGdriveAddDialogOpen}
-        onAdd={async (url, alias, type) => {
-          try {
-            await addGdriveFolder(url, alias, type);
-            toast({ title: "資料夾已新增", description: "請點擊同步按鈕開始下載" });
-            setIsGdriveAddDialogOpen(false);
-          } catch (err: any) {
-            toast({ title: "新增失敗", description: err.message, variant: "destructive" });
-          }
-        }}
-        history={gdriveHistory}
-      />
-
-      {/* GitHub Repos Modal */}
-      {showGitHubReposModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          {/* 背景遮罩 */}
-          <div
-            className="fixed inset-0 bg-black/50"
-            onClick={() => setShowGitHubReposModal(false)}
-          />
-          {/* Modal 內容 */}
-          <div className="relative z-50 w-full max-w-md mx-4 bg-background rounded-lg shadow-lg border max-h-[80vh] flex flex-col">
-            {/* 標題列 */}
-            <div className="flex items-center justify-between p-4 border-b">
-              <div className="flex items-center gap-2">
-                <FolderGit2 className="h-5 w-5" />
-                <h2 className="text-lg font-semibold">GitHub Repositories</h2>
-              </div>
-              <button
-                onClick={() => setShowGitHubReposModal(false)}
-                className="p-1 rounded-md hover:bg-accent"
-              >
-                <X className="h-5 w-5" />
-              </button>
-            </div>
-            {/* 搜尋框 */}
-            <div className="p-3 border-b">
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <input
-                  type="text"
-                  placeholder="搜尋 Repository..."
-                  className="w-full pl-9 pr-4 py-2 text-sm border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring"
-                  id="github-repos-search"
-                  onChange={(e) => {
-                    const searchValue = e.target.value.toLowerCase();
-                    const items = document.querySelectorAll('[data-github-repo]');
-                    items.forEach((item) => {
-                      const repoName = item.getAttribute('data-github-repo')?.toLowerCase() || '';
-                      (item as HTMLElement).style.display = repoName.includes(searchValue) ? 'flex' : 'none';
-                    });
-                  }}
-                />
-              </div>
-            </div>
-            {/* Repo 列表 */}
-            <div className="flex-1 overflow-y-auto p-2">
-              {availableRepos.map((repo) => (
-                <button
-                  key={repo.id}
-                  data-github-repo={repo.fullName}
-                  onClick={async () => {
-                    try {
-                      setIsGitHubCloning(true);
-                      await cloneGitHubRepo(repo.fullName);
-                      toast({ title: `已 Clone ${repo.fullName}` });
-                      setShowGitHubReposModal(false);
-                    } catch (err: any) {
-                      toast({ title: "Clone 失敗", description: err.message, variant: "destructive" });
-                    } finally {
-                      setIsGitHubCloning(false);
-                    }
-                  }}
-                  disabled={isGitHubCloning}
-                  className="flex items-center gap-3 w-full p-3 rounded-md hover:bg-accent text-left disabled:opacity-50"
-                >
-                  <Github className="h-4 w-4 flex-shrink-0" />
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium truncate">{repo.name}</div>
-                    <div className="text-xs text-muted-foreground truncate">{repo.fullName}</div>
-                  </div>
-                  <Plus className="h-4 w-4 flex-shrink-0 text-primary" />
-                </button>
-              ))}
-            </div>
-            {/* 底部資訊 */}
-            <div className="p-3 border-t text-xs text-muted-foreground text-center">
-              共 {availableRepos.length} 個可連結的 Repository
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* 歷史對話列表 */}
-      <ConversationList
-        open={isConversationListOpen}
-        onOpenChange={setIsConversationListOpen}
-        conversations={conversations}
-        currentConversationId={currentConversationId}
-        isLoading={isConversationsLoading}
-        error={conversationsError}
-        onSelect={handleSelectConversation}
-        onNewChat={handleNewChat}
-        onUpdateTitle={updateConversationTitle}
-        onDelete={deleteConversation}
-      />
-
-      {/* 清除檔案確認對話框 */}
-      <AlertDialog open={clearFilesDialogOpen} onOpenChange={setClearFilesDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>清除上傳檔案</AlertDialogTitle>
-            <AlertDialogDescription asChild>
-              <div>
-                {isLoadingStats ? (
-                  <span>載入中...</span>
-                ) : fileStats ? (
-                  <div className="space-y-2">
-                    <p>即將清除以下檔案，此操作無法復原：</p>
-                    <ul className="list-disc list-inside text-sm space-y-1 ml-2">
-                      {fileStats.uploads.count > 0 && (
-                        <li>上傳檔案：{fileStats.uploads.count} 個 ({formatFileSize(fileStats.uploads.size)})</li>
-                      )}
-                      {fileStats.pdfPages.count > 0 && (
-                        <li>PDF 拆解頁面：{fileStats.pdfPages.count} 個 ({formatFileSize(fileStats.pdfPages.size)})</li>
-                      )}
-                    </ul>
-                    {fileStats.total.count > 0 ? (
-                      <p className="font-medium mt-2">
-                        總計：{fileStats.total.count} 個檔案 ({formatFileSize(fileStats.total.size)})
-                      </p>
-                    ) : (
-                      <p className="text-muted-foreground">目前沒有可清除的檔案</p>
-                    )}
-                  </div>
-                ) : (
-                  <span>無法載入檔案資訊</span>
-                )}
-              </div>
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isClearingFiles}>取消</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleClearFiles}
-              disabled={isClearingFiles || isLoadingStats || !fileStats || fileStats.total.count === 0}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
-              {isClearingFiles ? '清除中...' : '確認清除'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
-  );
-}