botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/app/globals.css

@@ -0,0 +1,215 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* 和煦木質主題 - 日式療癒空間 */
+    --background: 37 37% 92%;        /* 榻榻米色 #F0EBE3 */
+    --foreground: 0 0% 0%;           /* 純黑色 #000000（更清晰辨識） */
+    --card: 38 36% 96%;              /* 象牙白 #FAF7F2 */
+    --card-foreground: 29 17% 25%;
+    --popover: 38 36% 96%;
+    --popover-foreground: 29 17% 25%;
+    --primary: 34 39% 63%;           /* 檜木色 #C4A57B */
+    --primary-foreground: 38 36% 96%;
+    --secondary: 180 11% 75%;        /* 青磁色 #B8C5C5 */
+    --secondary-foreground: 29 17% 25%;
+    --muted: 37 20% 88%;
+    --muted-foreground: 29 17% 50%;
+    --accent: 180 11% 75%;
+    --accent-foreground: 29 17% 25%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 38 36% 96%;
+    --border: 37 20% 85%;
+    --input: 37 20% 85%;
+    --ring: 34 39% 63%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    /* 和煦木質深色模式 - 深木質感 */
+    --background: 29 17% 12%;        /* 深木底 */
+    --foreground: 38 30% 90%;        /* 淺暖白 */
+    --card: 29 17% 18%;              /* 深木卡片 */
+    --card-foreground: 38 30% 90%;
+    --popover: 29 17% 18%;
+    --popover-foreground: 38 30% 90%;
+    --primary: 34 35% 58%;           /* 溫暖木色 */
+    --primary-foreground: 29 17% 12%;
+    --secondary: 180 15% 30%;        /* 深青磁 */
+    --secondary-foreground: 38 30% 90%;
+    --muted: 29 15% 25%;
+    --muted-foreground: 37 15% 65%;
+    --accent: 180 15% 35%;
+    --accent-foreground: 38 30% 90%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 38 30% 90%;
+    --border: 29 15% 22%;
+    --input: 29 15% 22%;
+    --ring: 34 35% 58%;
+  }
+}
+
+@layer base {
+  html {
+    font-size: 130%; /* 1.30 倍基礎字體（原 144% 縮減 10%） */
+  }
+
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  /* Safe Area Insets - 定義 CSS 變數供元件使用 */
+  :root {
+    --safe-area-inset-top: env(safe-area-inset-top, 0px);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
+    --safe-area-inset-left: env(safe-area-inset-left, 0px);
+    --safe-area-inset-right: env(safe-area-inset-right, 0px);
+
+    /* Android 虛擬按鈕高度（三鍵導航模式） */
+    --android-nav-bar-height: 48px;
+  }
+
+  /* Capacitor App 專用：固定 viewport，防止內容捲動時拉動整個頁面 */
+  html:has(body.capacitor) {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  body.capacitor {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+/* Custom scrollbar - Nordic style */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-muted rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-muted-foreground/30;
+}
+
+/* Scrollbar hide utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+  html {
+    font-size: 21px; /* 16px * 1.30（原 23.04px 縮減約 10%） */
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* Android specific optimizations - 只在 Capacitor App 套用 */
+@supports (-webkit-touch-callout: none) {
+  /* iOS specific */
+}
+
+@supports not (-webkit-touch-callout: none) {
+  /* Android specific - 只在 Capacitor 環境套用 */
+  body.capacitor {
+    /* 防止 Android 的 overscroll bounce 效果 */
+    overscroll-behavior: none;
+  }
+
+  /* 防止 pull-to-refresh */
+  html:has(body.capacitor),
+  body.capacitor {
+    overscroll-behavior-y: contain;
+  }
+}
+
+/* Typography prose 覆寫 - AI 回應使用純黑/純白文字 */
+.prose {
+  --tw-prose-body: hsl(var(--foreground));
+  --tw-prose-headings: hsl(var(--foreground));
+  --tw-prose-lead: hsl(var(--foreground));
+  --tw-prose-links: hsl(var(--primary));
+  --tw-prose-bold: hsl(var(--foreground));
+  --tw-prose-counters: hsl(var(--muted-foreground));
+  --tw-prose-bullets: hsl(var(--muted-foreground));
+  --tw-prose-hr: hsl(var(--border));
+  --tw-prose-quotes: hsl(var(--foreground));
+  --tw-prose-quote-borders: hsl(var(--border));
+  --tw-prose-captions: hsl(var(--muted-foreground));
+  --tw-prose-code: hsl(var(--foreground));
+  --tw-prose-pre-code: hsl(var(--foreground));
+  --tw-prose-pre-bg: hsl(var(--muted) / 0.5);
+  --tw-prose-th-borders: hsl(var(--border));
+  --tw-prose-td-borders: hsl(var(--border));
+}
+
+.dark .prose {
+  --tw-prose-body: hsl(var(--foreground));
+  --tw-prose-headings: hsl(var(--foreground));
+  --tw-prose-lead: hsl(var(--foreground));
+  --tw-prose-links: hsl(var(--primary));
+  --tw-prose-bold: hsl(var(--foreground));
+  --tw-prose-counters: hsl(var(--muted-foreground));
+  --tw-prose-bullets: hsl(var(--muted-foreground));
+  --tw-prose-hr: hsl(var(--border));
+  --tw-prose-quotes: hsl(var(--foreground));
+  --tw-prose-quote-borders: hsl(var(--border));
+  --tw-prose-captions: hsl(var(--muted-foreground));
+  --tw-prose-code: hsl(var(--foreground));
+  --tw-prose-pre-code: hsl(var(--foreground));
+  --tw-prose-pre-bg: hsl(var(--muted) / 0.5);
+  --tw-prose-th-borders: hsl(var(--border));
+  --tw-prose-td-borders: hsl(var(--border));
+}
+
+/* 縮減聊天訊息段落間距（原本 1.14em → 1/3 = 0.4em） */
+.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.4em;
+  margin-bottom: 0.4em;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.6em;
+  margin-bottom: 0.3em;
+}
+
+/* 縮減水平分隔線 <hr> 間距 */
+.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+  margin-top: 0.4em;
+  margin-bottom: 0.4em;
+}
+
+.prose > :first-child {
+  margin-top: 0;
+}
+
+.prose > :last-child {
+  margin-bottom: 0;
+}

package/botrun-c/web/app/image-preview/page.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+// ============================================================================
+// image-preview/page.tsx - 圖片預覽頁面（直接訪問模式）
+// 當直接訪問 /image-preview?url=... 時顯示完整頁面
+// ============================================================================
+
+import { Suspense } from "react";
+import { useSearchParams, useRouter } from "next/navigation";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+import { Button } from "@/components/ui/button";
+import { X, Download } from "lucide-react";
+import { useState, useEffect } from "react";
+import { Filesystem, Directory } from "@capacitor/filesystem";
+import { Share } from "@capacitor/share";
+
+function ImagePreviewContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const imageUrl = searchParams.get("url");
+  const imageAlt = searchParams.get("alt") || "Preview";
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  // 監聽 ESC 鍵關閉
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        sessionStorage.setItem('skipChatInputFocus', 'true');
+        router.back();
+      }
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [router]);
+
+  if (!imageUrl) {
+    router.back();
+    return null;
+  }
+
+  const handleDownload = async () => {
+    setIsDownloading(true);
+    try {
+      // 1. Fetch 圖片
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+
+      // 2. 檢測平台
+      const isNative = (window as any).Capacitor?.isNativePlatform() || false;
+
+      if (isNative) {
+        // Native（iOS/Android）：使用 Share API
+        console.log("🔽 [Download] Native platform detected, using Share API");
+
+        // 轉換 Blob 為 base64
+        const reader = new FileReader();
+        reader.onloadend = async () => {
+          try {
+            const base64Data = reader.result as string;
+            const base64String = base64Data.split(",")[1];
+            const fileName = `generated-image-${Date.now()}.png`;
+
+            // 寫入暫存檔案
+            const result = await Filesystem.writeFile({
+              path: fileName,
+              data: base64String,
+              directory: Directory.Cache,
+            });
+
+            console.log("✅ [Download] Temp file created:", result.uri);
+
+            // 觸發系統分享面板
+            await Share.share({
+              title: "儲存圖片",
+              text: `圖片：${fileName}`,
+              url: result.uri,
+              dialogTitle: "選擇儲存位置",
+            });
+
+            console.log("✅ [Download] Share dialog completed");
+          } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : String(error);
+
+            // 如果使用者取消分享，不顯示錯誤訊息
+            if (errorMessage.toLowerCase().includes("cancel")) {
+              console.log("ℹ️ [Download] Share cancelled by user");
+              return;
+            }
+
+            // 其他錯誤顯示為下載失敗
+            console.error("❌ [Download] Failed to save file:", error);
+            alert("下載失敗: " + errorMessage);
+          }
+        };
+        reader.readAsDataURL(blob);
+      } else {
+        // Web：傳統 blob download
+        console.log("🔽 [Download] Web platform detected, using blob URL");
+
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `generated-image-${Date.now()}.png`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+
+        console.log("✅ [Download] File downloaded");
+      }
+    } catch (error) {
+      console.error("❌ [Download] Error:", error);
+      alert("下載失敗: " + (error instanceof Error ? error.message : "未知錯誤"));
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black">
+      {/* 桌面版：右上角顯示下載 + 關閉按鈕 */}
+      <div className="absolute top-4 right-4 hidden md:flex items-center gap-2 z-10">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleDownload}
+          disabled={isDownloading}
+          className="text-white hover:bg-white/20 cursor-pointer touch-manipulation"
+          title="下載圖片"
+          aria-label="下載圖片"
+        >
+          <Download className="h-5 w-5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => {
+            sessionStorage.setItem('skipChatInputFocus', 'true');
+            router.back();
+          }}
+          className="text-white hover:bg-white/20 cursor-pointer touch-manipulation"
+          title="關閉"
+          aria-label="關閉"
+        >
+          <X className="h-5 w-5" />
+        </Button>
+      </div>
+
+      {/* 手機版：右上角只顯示關閉按鈕 */}
+      <div className="absolute top-4 right-4 md:hidden z-10">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => {
+            sessionStorage.setItem('skipChatInputFocus', 'true');
+            router.back();
+          }}
+          className="text-white hover:bg-white/20 cursor-pointer touch-manipulation h-12 w-12"
+          title="關閉"
+          aria-label="關閉"
+        >
+          <X className="h-6 w-6" />
+        </Button>
+      </div>
+
+      {/* 手機版：底部中間顯示下載按鈕 */}
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex md:hidden z-10">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleDownload}
+          disabled={isDownloading}
+          className="text-white hover:bg-white/20 cursor-pointer touch-manipulation h-12 w-12"
+          title="下載圖片"
+          aria-label="下載圖片"
+        >
+          <Download className="h-6 w-6" />
+        </Button>
+      </div>
+
+      {/* 圖片區 + 縮放 */}
+      <div className="h-full flex items-center justify-center">
+        <TransformWrapper
+          initialScale={1}
+          minScale={0.5}
+          maxScale={4}
+          wheel={{ step: 0.1 }}
+          pinch={{ step: 5 }}
+          doubleClick={{ mode: "reset" }}
+        >
+          <TransformComponent
+            wrapperClass="!w-full !h-full"
+            contentClass="!w-full !h-full flex items-center justify-center"
+          >
+            <img
+              src={imageUrl}
+              alt={imageAlt}
+              className="max-w-full max-h-full object-contain"
+            />
+          </TransformComponent>
+        </TransformWrapper>
+      </div>
+    </div>
+  );
+}
+
+export default function ImagePreviewPage() {
+  return (
+    <Suspense fallback={<div className="fixed inset-0 bg-black" />}>
+      <ImagePreviewContent />
+    </Suspense>
+  );
+}

package/botrun-c/web/app/layout.tsx

@@ -0,0 +1,46 @@
+import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Providers } from "@/components/Providers";
+import { Toaster } from "@/components/ui/toaster";
+import { StatusBarProvider } from "@/components/StatusBarProvider";
+import { CapacitorProvider } from "@/components/CapacitorProvider";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "波特人 - AI Agent Platform",
+  description: "Powerful AI Agent powered by Claude Sonnet 4.5",
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: "cover",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
+    { media: "(prefers-color-scheme: dark)", color: "#0c0e15" },
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-TW" suppressHydrationWarning>
+      <body className={inter.className}>
+        <CapacitorProvider />
+        <StatusBarProvider>
+          <Providers>
+            {children}
+            <Toaster />
+          </Providers>
+        </StatusBarProvider>
+      </body>
+    </html>
+  );
+}

package/botrun-c/web/app/page.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+import { Bot, Rocket } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
+import { LoginPage } from "@/components/LoginPage";
+import { ChatPage } from "@/components/ChatPage";
+
+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}`);
+  }
+}
+
+export default function Home() {
+  const { user, loading } = useAuth();
+
+  useEffect(() => {
+    log("🚀 App initialized");
+    log("Environment:", {
+      isClient: typeof window !== 'undefined',
+      userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : 'N/A',
+    });
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center bg-background">
+        <div className="text-center">
+          <Bot className="mx-auto mb-4 h-12 w-12 animate-pulse text-muted-foreground" />
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <LoginPage />;
+  }
+
+  return <ChatPage />;
+}

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useCapacitorPlatform } from '@/hooks/useCapacitorPlatform';
+import { useCapawesomeLiveUpdate } from '@/hooks/useCapawesomeLiveUpdate';
+
+/**
+ * CapacitorProvider
+ *
+ * 統一管理所有 Capacitor 相關功能的初始化
+ *
+ * 功能:
+ * 1. 環境偵測 - 偵測是否在 Capacitor 環境並加上 CSS class
+ * 2. Live Update - 自動檢查並套用 OTA 更新 (Hook 內部會自動判斷環境並發送 ready signal)
+ * 3. [未來擴展] Push Notification、App Rating、Status Bar 等
+ *
+ * 使用方式:
+ * 在 app/layout.tsx 中使用此 Provider
+ */
+export function CapacitorProvider() {
+  const { isCapacitor, platform } = useCapacitorPlatform();
+
+  // 1. 環境偵測 - 加上 CSS class
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      if (isCapacitor) {
+        document.body.classList.add('capacitor');
+        console.log(`🔍 [CapacitorProvider] Capacitor environment detected (${platform})`);
+      } else {
+        document.body.classList.add('web');
+        console.log('🔍 [CapacitorProvider] Web environment detected');
+      }
+    }
+  }, [isCapacitor, platform]);
+
+  // 2. Live Update
+  // Hook 內部會自動判斷是否在 Capacitor 環境
+  // Web 環境會自動跳過,不會有任何副作用
+  // ready() signal 已整合到 hook 內部
+  useCapawesomeLiveUpdate();
+
+  return null;
+}