botrun-horse 2.29.2 → 2.30.0

package/botrun-c/web/components/github/GitHubConnect.tsx

@@ -0,0 +1,366 @@
+'use client';
+
+/**
+ * GitHubConnect - GitHub 連結管理組件
+ *
+ * 功能：
+ * - 顯示 GitHub 連結狀態
+ * - 連結/中斷 GitHub
+ * - 管理已連結的 Repositories
+ */
+
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { useGitHub, type ConnectedRepo, type GitHubRepoInfo } from '@/hooks/useGitHub';
+import { useAuthToken } from '@/hooks/useAuthToken';
+
+// ============ Icons ============
+
+const GitHubIcon = () => (
+  <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+const RefreshIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+  </svg>
+);
+
+const ExternalLinkIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+  </svg>
+);
+
+const TrashIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+  </svg>
+);
+
+const DownloadIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+  </svg>
+);
+
+// ============ Sub Components ============
+
+interface RepoCardProps {
+  repo: ConnectedRepo;
+  onSync: () => void;
+  onDelete: () => void;
+  isLoading?: boolean;
+}
+
+const RepoCard: React.FC<RepoCardProps> = ({ repo, onSync, onDelete, isLoading }) => {
+  const statusColors: Record<string, string> = {
+    cloned: 'bg-green-100 text-green-800',
+    cloning: 'bg-blue-100 text-blue-800',
+    syncing: 'bg-blue-100 text-blue-800',
+    pending: 'bg-yellow-100 text-yellow-800',
+    error: 'bg-red-100 text-red-800',
+  };
+
+  const statusLabels: Record<string, string> = {
+    cloned: '已同步',
+    cloning: 'Clone 中...',
+    syncing: '同步中...',
+    pending: '等待中',
+    error: '錯誤',
+  };
+
+  return (
+    <div className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 transition-colors">
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-sm truncate">{repo.repoFullName}</span>
+          <span className={`px-2 py-0.5 rounded-full text-xs ${statusColors[repo.status]}`}>
+            {statusLabels[repo.status]}
+          </span>
+        </div>
+        <div className="flex items-center gap-2 mt-1 text-xs text-gray-500">
+          <span>分支: {repo.currentBranch}</span>
+          {repo.lastSyncAt && (
+            <span>• 上次同步: {new Date(repo.lastSyncAt).toLocaleString('zh-TW')}</span>
+          )}
+        </div>
+        {repo.error && (
+          <div className="mt-1 text-xs text-red-600">
+            錯誤: {repo.error.message}
+          </div>
+        )}
+      </div>
+      <div className="flex items-center gap-1 ml-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onSync}
+          disabled={isLoading || repo.status === 'syncing' || repo.status === 'cloning'}
+          title="同步"
+        >
+          <RefreshIcon />
+        </Button>
+        <a
+          href={`https://github.com/${repo.repoFullName}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="p-2 hover:bg-gray-100 rounded-md transition-colors"
+          title="在 GitHub 開啟"
+        >
+          <ExternalLinkIcon />
+        </a>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onDelete}
+          disabled={isLoading}
+          className="text-red-600 hover:text-red-700 hover:bg-red-50"
+          title="移除"
+        >
+          <TrashIcon />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+interface AvailableRepoCardProps {
+  repo: GitHubRepoInfo;
+  onClone: () => void;
+  isLoading?: boolean;
+}
+
+const AvailableRepoCard: React.FC<AvailableRepoCardProps> = ({ repo, onClone, isLoading }) => {
+  return (
+    <div className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 transition-colors">
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-sm truncate">{repo.fullName}</span>
+          {repo.private && (
+            <span className="px-2 py-0.5 rounded-full text-xs bg-gray-100 text-gray-600">
+              私有
+            </span>
+          )}
+        </div>
+        <div className="text-xs text-gray-500 mt-1">
+          預設分支: {repo.defaultBranch}
+        </div>
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={onClone}
+        disabled={isLoading}
+        className="ml-2"
+      >
+        <DownloadIcon />
+        <span className="ml-1">Clone</span>
+      </Button>
+    </div>
+  );
+};
+
+// ============ Main Component ============
+
+export function GitHubConnect() {
+  const authToken = useAuthToken();
+  const {
+    connected,
+    loading,
+    error,
+    connectedRepos,
+    availableRepos,
+    connect,
+    disconnect,
+    refresh,
+    cloneRepo,
+    syncRepo,
+    deleteRepo,
+  } = useGitHub(authToken ?? undefined);
+
+  const [actionLoading, setActionLoading] = useState(false);
+
+  const handleDisconnect = async () => {
+    if (!confirm('確定要中斷 GitHub 連結嗎？這會移除所有已 Clone 的 Repositories。')) {
+      return;
+    }
+
+    try {
+      setActionLoading(true);
+      await disconnect();
+    } catch (err) {
+      console.error('Disconnect failed:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleClone = async (repoFullName: string) => {
+    try {
+      setActionLoading(true);
+      await cloneRepo(repoFullName);
+    } catch (err) {
+      console.error('Clone failed:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleSync = async (repoFullName: string) => {
+    try {
+      setActionLoading(true);
+      await syncRepo(repoFullName);
+    } catch (err) {
+      console.error('Sync failed:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleDelete = async (repoFullName: string) => {
+    if (!confirm(`確定要移除 ${repoFullName} 嗎？`)) {
+      return;
+    }
+
+    try {
+      setActionLoading(true);
+      await deleteRepo(repoFullName);
+    } catch (err) {
+      console.error('Delete failed:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="p-4">
+        <div className="animate-pulse">
+          <div className="h-4 bg-gray-200 rounded w-1/3 mb-4"></div>
+          <div className="h-10 bg-gray-200 rounded mb-2"></div>
+          <div className="h-10 bg-gray-200 rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-medium flex items-center gap-2">
+          <GitHubIcon />
+          GitHub 連結
+        </h3>
+        {connected && (
+          <Button variant="ghost" size="sm" onClick={refresh} disabled={actionLoading}>
+            <RefreshIcon />
+            <span className="ml-1">重新整理</span>
+          </Button>
+        )}
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+          {error}
+        </div>
+      )}
+
+      {/* Not Connected */}
+      {!connected && (
+        <div className="text-center py-8">
+          <GitHubIcon />
+          <p className="mt-4 text-gray-600">
+            連結您的 GitHub 帳號以存取 Repositories
+          </p>
+          <Button onClick={connect} className="mt-4 gap-2">
+            <GitHubIcon />
+            連結 GitHub 帳號
+          </Button>
+        </div>
+      )}
+
+      {/* Connected */}
+      {connected && (
+        <>
+          {/* Status */}
+          <div className="flex items-center gap-2 p-3 bg-green-50 border border-green-200 rounded-lg">
+            <CheckIcon />
+            <span className="text-green-700">已連結 GitHub</span>
+          </div>
+
+          {/* Connected Repos */}
+          <div>
+            <h4 className="font-medium mb-2">已連結的 Repositories ({connectedRepos.length})</h4>
+            {connectedRepos.length === 0 ? (
+              <p className="text-gray-500 text-sm">尚未連結任何 Repository</p>
+            ) : (
+              <div className="space-y-2">
+                {connectedRepos.map((repo) => (
+                  <RepoCard
+                    key={repo.id}
+                    repo={repo}
+                    onSync={() => handleSync(repo.repoFullName)}
+                    onDelete={() => handleDelete(repo.repoFullName)}
+                    isLoading={actionLoading}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Available Repos */}
+          {availableRepos.length > 0 && (
+            <div>
+              <h4 className="font-medium mb-2">可連結的 Repositories ({availableRepos.length})</h4>
+              <div className="space-y-2 max-h-60 overflow-y-auto">
+                {availableRepos
+                  .filter((r) => !connectedRepos.some((c) => c.repoFullName === r.fullName))
+                  .map((repo) => (
+                    <AvailableRepoCard
+                      key={repo.id}
+                      repo={repo}
+                      onClone={() => handleClone(repo.fullName)}
+                      isLoading={actionLoading}
+                    />
+                  ))}
+              </div>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex gap-2 pt-4 border-t">
+            <a
+              href="https://github.com/apps/botrun/installations/new"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-blue-600 hover:underline"
+            >
+              調整授權 Repos
+            </a>
+            <span className="text-gray-300">|</span>
+            <button
+              onClick={handleDisconnect}
+              disabled={actionLoading}
+              className="text-sm text-red-600 hover:underline"
+            >
+              中斷連結
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default GitHubConnect;

package/botrun-c/web/components/github/index.ts

@@ -0,0 +1,2 @@
+export { GitHubConnect } from './GitHubConnect';
+export { default as GitHubConnectDefault } from './GitHubConnect';

package/botrun-c/web/components/import-skill-dialog.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2, AlertCircle } from "lucide-react";
+import { getApiEndpoint } from "@/lib/api-url";
+import { useAuth } from "@/contexts/AuthContext";
+
+interface ImportSkillDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;  // 匯入成功後重新載入技能列表
+}
+
+interface SkillPreview {
+  shareId: string;
+  skillName: string;
+  skillDescription: string;
+  skillIcon: string;
+  createdAt: string;
+}
+
+export function ImportSkillDialog({
+  open,
+  onOpenChange,
+  onSuccess
+}: ImportSkillDialogProps) {
+  const { user } = useAuth();
+  const [shareId, setShareId] = useState("");
+  const [isImporting, setIsImporting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // 名稱衝突確認對話框狀態
+  const [showConflictDialog, setShowConflictDialog] = useState(false);
+  const [conflictSkillName, setConflictSkillName] = useState<string | null>(null);
+
+  // 確認匯入
+  const handleImport = async (overwrite: boolean = false) => {
+    if (!user) {
+      setError('請先登入');
+      return;
+    }
+
+    setIsImporting(true);
+    setError(null);
+
+    try {
+      const idToken = await user.getIdToken();
+      const url = getApiEndpoint(`/api/skills/import/${shareId.trim()}`);
+
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${idToken}`
+        },
+        body: JSON.stringify({ overwrite })
+      });
+
+      const data = await response.json();
+
+      // 檢查名稱衝突
+      if (response.status === 409 && data.conflict) {
+        setConflictSkillName(data.skillName);
+        setShowConflictDialog(true);
+        setIsImporting(false);
+        return;
+      }
+
+      // 檢查其他錯誤（包括技能不存在 404）
+      if (!response.ok || !data.success) {
+        throw new Error(data.error || '匯入失敗');
+      }
+
+      // 成功：關閉 Dialog 並重新載入列表
+      onOpenChange(false);
+      onSuccess();
+
+      // 重置狀態
+      setShareId("");
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || '匯入失敗');
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  // 處理衝突選擇
+  const handleConflictChoice = async (choice: 'overwrite' | 'cancel') => {
+    setShowConflictDialog(false);
+
+    if (choice === 'cancel') {
+      return;
+    }
+
+    if (choice === 'overwrite') {
+      await handleImport(true);
+    }
+  };
+
+  // 重置狀態
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      setShareId("");
+      setError(null);
+    }
+    onOpenChange(newOpen);
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>匯入分享技能</DialogTitle>
+            <DialogDescription>
+              輸入分享 ID 以匯入其他人分享的技能
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            {/* 輸入分享 ID */}
+            <div className="space-y-2">
+              <Label htmlFor="shareId">分享 ID</Label>
+              <Input
+                id="shareId"
+                placeholder="貼上別人分享的 ID"
+                value={shareId}
+                onChange={(e) => {
+                  setShareId(e.target.value);
+                  setError(null);
+                }}
+                className="font-mono text-xs"
+              />
+            </div>
+
+            {/* 錯誤訊息 */}
+            {error && (
+              <div className="flex items-start gap-2 p-3 bg-destructive/10 text-destructive rounded-md text-sm">
+                <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
+                <span>{error}</span>
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+            <Button
+              onClick={() => handleImport()}
+              disabled={!shareId.trim() || isImporting}
+            >
+              {isImporting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              確認匯入
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 名稱衝突確認對話框 */}
+      <AlertDialog open={showConflictDialog} onOpenChange={setShowConflictDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>技能名稱已存在</AlertDialogTitle>
+            <AlertDialogDescription>
+              您已經有一個名為「<strong>{conflictSkillName}</strong>」的技能。請選擇如何處理：
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => handleConflictChoice('cancel')}>
+              取消匯入
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => handleConflictChoice('overwrite')}
+              disabled={isImporting}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {isImporting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              覆寫現有技能
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/botrun-c/web/components/scroll-to-bottom-button.tsx

@@ -0,0 +1,90 @@
+/**
+ * ScrollToBottomButton Component
+ *
+ * 職責：浮動按鈕 UI，提供使用者快速回到底部的能力
+ *
+ * 遵循原則：
+ * - SRP: 單一職責 - 只負責按鈕 UI 和點擊行為
+ * - OCP: 開放封閉 - 樣式可透過 className 擴展
+ * - DIP: 依賴倒置 - 依賴 props 而非具體實作
+ */
+
+import { ChevronDown } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useCapacitorPlatform } from '@/hooks/useCapacitorPlatform';
+
+export interface ScrollToBottomButtonProps {
+  /**
+   * 是否顯示按鈕
+   */
+  visible: boolean;
+
+  /**
+   * 點擊按鈕的回調函式
+   */
+  onClick: () => void;
+
+  /**
+   * 是否為 Capacitor 環境（影響 bottom 位置）
+   * @deprecated 現在由內部 useCapacitorPlatform hook 自動偵測，無需手動傳入
+   */
+  isCapacitor?: boolean;
+
+  /**
+   * 自訂 className（可選）
+   */
+  className?: string;
+}
+
+/**
+ * 浮動「回到底部」按鈕
+ *
+ * 設計特點：
+ * 1. 僅在使用者向上捲動時顯示（controlled component）
+ * 2. 使用 Lucide ChevronDown icon
+ * 3. 固定在中間下方，避開輸入框區域
+ * 4. 支援 Capacitor 環境的 safe area
+ *
+ * @example
+ * ```tsx
+ * <ScrollToBottomButton
+ *   visible={!isAtBottom}
+ *   onClick={scrollToBottom}
+ * />
+ * ```
+ */
+export function ScrollToBottomButton({
+  visible,
+  onClick,
+  isCapacitor: _deprecatedIsCapacitor, // 保留參數但不使用（向下相容）
+  className = '',
+}: ScrollToBottomButtonProps) {
+  // 使用統一的平台偵測 hook（替代手動傳入的 isCapacitor prop）
+  const { getBottomPadding } = useCapacitorPlatform();
+
+  if (!visible) return null;
+
+  return (
+    <Button
+      onClick={onClick}
+      size="icon"
+      className={`
+        fixed left-1/2 -translate-x-1/2 z-30
+        h-9 w-9 rounded-full
+        bg-primary/90 hover:bg-primary
+        shadow-lg hover:shadow-xl
+        transition-all duration-200
+        backdrop-blur-sm
+        ${className}
+      `}
+      style={{
+        // 位置：輸入框上方（距離底部 6rem）
+        // 使用統一的平台偵測邏輯，自動處理 desktop/mobile-web/ios/android
+        bottom: getBottomPadding('6rem'),
+      }}
+      aria-label="回到底部"
+    >
+      <ChevronDown className="h-4 w-4 text-primary-foreground" />
+    </Button>
+  );
+}