@akiojin/gwt 4.2.0 → 4.3.1

package/src/web/client/src/components/graph/BranchDetailPanel.tsx

@@ -0,0 +1,152 @@
+/**
+ * ブランチ詳細パネル
+ *
+ * ノードクリック時に右側に表示されるサイドパネル
+ */
+
+import React from "react";
+import { Link } from "react-router-dom";
+import { X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import type { Branch } from "../../../../../types/api.js";
+
+interface BranchDetailPanelProps {
+  branch: Branch | null;
+  onClose: () => void;
+  className?: string;
+}
+
+export function BranchDetailPanel({
+  branch,
+  onClose,
+  className,
+}: BranchDetailPanelProps) {
+  if (!branch) return null;
+
+  const hasWorktree = Boolean(branch.worktreePath);
+
+  return (
+    <div
+      className={cn(
+        "absolute right-0 top-0 h-full w-80 border-l bg-card/95 backdrop-blur-sm",
+        "animate-in slide-in-from-right duration-300",
+        className,
+      )}
+    >
+      <Card className="h-full rounded-none border-0">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
+          <div className="flex items-center gap-2">
+            <Badge variant={branch.type === "local" ? "local" : "remote"}>
+              {branch.type === "local" ? "Local" : "Remote"}
+            </Badge>
+            {hasWorktree && <Badge variant="success">Worktree</Badge>}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          {/* ブランチ名 */}
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Branch Name
+            </p>
+            <p className="mt-1 break-all font-mono text-sm">{branch.name}</p>
+          </div>
+
+          {/* ベースブランチ */}
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Base Branch
+            </p>
+            <p className="mt-1 font-mono text-sm">
+              {branch.baseBranch ?? "Unknown"}
+            </p>
+          </div>
+
+          {/* コミットメッセージ */}
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Last Commit
+            </p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {branch.commitMessage ?? "No commit message"}
+            </p>
+          </div>
+
+          {/* Divergence */}
+          {branch.divergence && (
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                Divergence
+              </p>
+              <div className="mt-2 flex flex-wrap gap-2">
+                <Badge variant="outline" className="text-xs">
+                  ↑ {branch.divergence.ahead} ahead
+                </Badge>
+                <Badge variant="outline" className="text-xs">
+                  ↓ {branch.divergence.behind} behind
+                </Badge>
+                <Badge
+                  variant={branch.divergence.upToDate ? "success" : "warning"}
+                  className="text-xs"
+                >
+                  {branch.divergence.upToDate ? "Up to date" : "Needs sync"}
+                </Badge>
+              </div>
+            </div>
+          )}
+
+          {/* Worktree パス */}
+          {hasWorktree && (
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                Worktree Path
+              </p>
+              <p className="mt-1 break-all font-mono text-xs text-muted-foreground">
+                {branch.worktreePath}
+              </p>
+            </div>
+          )}
+
+          {/* マージステータス */}
+          {branch.mergeStatus && (
+            <div>
+              <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                Merge Status
+              </p>
+              <Badge
+                variant={
+                  branch.mergeStatus === "merged" ? "success" : "outline"
+                }
+                className="mt-1"
+              >
+                {branch.mergeStatus}
+              </Badge>
+            </div>
+          )}
+        </CardContent>
+
+        <CardFooter className="flex flex-col gap-2">
+          <Button asChild className="w-full">
+            <Link to={`/${encodeURIComponent(branch.name)}`}>View Details</Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/web/client/src/components/graph/BranchNode.tsx

@@ -0,0 +1,200 @@
+/**
+ * ブランチノードコンポーネント
+ *
+ * ソーマ（神経細胞体）をイメージした生物発光ノード
+ * 多層グロー効果と有機的なアニメーションで生命感を表現
+ */
+
+import React, { memo, useMemo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { cn } from "@/lib/utils";
+import { getNodeColor, getNodeSize, type GraphNode } from "./graphUtils";
+
+type BranchNodeProps = NodeProps<GraphNode>;
+
+export const BranchNode = memo(function BranchNode({
+  data,
+  selected,
+}: BranchNodeProps) {
+  const { branch } = data;
+
+  if (!branch) return null;
+
+  const size = getNodeSize(branch);
+  const _baseColor = getNodeColor(branch);
+  const hasWorktree = Boolean(branch.worktreePath);
+  const isMerged = branch.mergeStatus === "merged";
+
+  // ブランチ名を短縮
+  const displayName = useMemo(() => {
+    if (branch.name.length > 18) {
+      return `${branch.name.slice(0, 15)}...`;
+    }
+    return branch.name;
+  }, [branch.name]);
+
+  // ノードカラーをHSL値として抽出（動的スタイル用）
+  const colorStyle = useMemo(() => {
+    if (hasWorktree) {
+      return {
+        primary: "hsl(160 90% 45%)",
+        glow: "hsl(160 90% 45% / 0.4)",
+        inner: "hsl(160 90% 50% / 0.2)",
+      };
+    }
+    if (branch.type === "local") {
+      return {
+        primary: "hsl(280 85% 65%)",
+        glow: "hsl(280 85% 65% / 0.4)",
+        inner: "hsl(280 85% 70% / 0.2)",
+      };
+    }
+    return {
+      primary: "hsl(200 90% 55%)",
+      glow: "hsl(200 90% 55% / 0.4)",
+      inner: "hsl(200 90% 60% / 0.2)",
+    };
+  }, [hasWorktree, branch.type]);
+
+  return (
+    <>
+      {/* 入力ハンドル - デンドライト接続点 */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!h-3 !w-3 !rounded-full !border-2 !bg-transparent transition-all duration-300"
+        style={{
+          borderColor: colorStyle.primary,
+          boxShadow: `0 0 8px ${colorStyle.glow}`,
+        }}
+      />
+
+      {/* ソーマ本体 */}
+      <div
+        className={cn(
+          "group relative flex cursor-pointer items-center justify-center rounded-full",
+          "transition-all duration-500 ease-out",
+          hasWorktree && "animate-active-synapse",
+          !hasWorktree && "animate-soma-pulse",
+          selected && "ring-2 ring-offset-4 ring-offset-background",
+          isMerged && "opacity-50",
+        )}
+        style={{
+          width: size,
+          height: size,
+          background: `radial-gradient(circle at 30% 30%, ${colorStyle.inner}, transparent 60%)`,
+          border: `2px solid ${colorStyle.primary}`,
+          boxShadow: selected
+            ? `0 0 30px ${colorStyle.glow}, inset 0 0 20px ${colorStyle.inner}, 0 0 0 4px ${colorStyle.primary}`
+            : undefined,
+        }}
+      >
+        {/* 外殻グロー */}
+        <div
+          className="absolute -inset-2 rounded-full opacity-30 blur-md"
+          style={{ backgroundColor: colorStyle.primary }}
+        />
+
+        {/* 核膜 - 内側のリング */}
+        <div
+          className="absolute inset-2 rounded-full border opacity-40"
+          style={{ borderColor: colorStyle.primary }}
+        />
+
+        {/* 核 - 中心部 */}
+        <div
+          className="relative z-10 flex items-center justify-center rounded-full shadow-lg"
+          style={{
+            width: size * 0.45,
+            height: size * 0.45,
+            background: `linear-gradient(135deg, ${colorStyle.primary}, ${colorStyle.inner})`,
+            boxShadow: `0 0 15px ${colorStyle.glow}`,
+          }}
+        >
+          {/* アイコン/タイプ表示 */}
+          <span className="text-xs font-bold text-background">
+            {branch.type === "local" ? "L" : "R"}
+          </span>
+        </div>
+
+        {/* 細胞小器官 - 装飾ドット */}
+        {!isMerged && (
+          <>
+            <div
+              className="absolute h-1.5 w-1.5 rounded-full animate-vesicle-release"
+              style={{
+                backgroundColor: colorStyle.primary,
+                top: "20%",
+                right: "25%",
+                animationDelay: "0s",
+              }}
+            />
+            <div
+              className="absolute h-1 w-1 rounded-full animate-vesicle-release"
+              style={{
+                backgroundColor: colorStyle.primary,
+                bottom: "25%",
+                left: "20%",
+                animationDelay: "0.7s",
+              }}
+            />
+          </>
+        )}
+
+        {/* Worktree活性インジケータ */}
+        {hasWorktree && (
+          <div
+            className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full animate-synapse-spark"
+            style={{
+              backgroundColor: "hsl(160 90% 45%)",
+              boxShadow: "0 0 10px hsl(160 90% 45% / 0.8)",
+            }}
+          >
+            <span className="text-[8px] font-bold text-background">W</span>
+          </div>
+        )}
+
+        {/* マージ済みオーバーレイ */}
+        {isMerged && (
+          <div className="absolute inset-0 flex items-center justify-center rounded-full bg-background/60 backdrop-blur-sm">
+            <span className="text-[10px] font-medium text-muted-foreground">
+              merged
+            </span>
+          </div>
+        )}
+
+        {/* ホバーツールチップ */}
+        <div
+          className={cn(
+            "absolute -bottom-12 left-1/2 z-50 -translate-x-1/2",
+            "rounded-lg border border-border/50 bg-card/95 px-3 py-1.5 backdrop-blur-md",
+            "opacity-0 shadow-xl transition-all duration-300",
+            "group-hover:opacity-100 group-hover:-translate-y-1",
+          )}
+          style={{
+            boxShadow: `0 4px 20px hsl(220 30% 0% / 0.5), 0 0 20px ${colorStyle.glow}`,
+          }}
+        >
+          <p className="whitespace-nowrap text-xs font-medium text-foreground">
+            {displayName}
+          </p>
+          <p className="text-[10px] text-muted-foreground">
+            {branch.type === "local" ? "Local" : "Remote"}
+            {hasWorktree && " • Active"}
+          </p>
+        </div>
+      </div>
+
+      {/* 出力ハンドル - アクソン接続点 */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!h-3 !w-3 !rounded-full !border-2 !bg-transparent transition-all duration-300"
+        style={{
+          borderColor: colorStyle.primary,
+          boxShadow: `0 0 8px ${colorStyle.glow}`,
+        }}
+      />
+    </>
+  );
+});

package/src/web/client/src/components/graph/ClusterNode.tsx

@@ -0,0 +1,211 @@
+/**
+ * クラスタノードコンポーネント
+ *
+ * ニューロン群（神経細胞集合体）をイメージした有機的ノード
+ * 変形する膜と軌道を描く核で複数ブランチのグループを表現
+ */
+
+import React, { memo, useMemo } from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { cn } from "@/lib/utils";
+import type { GraphNode } from "./graphUtils";
+
+type ClusterNodeProps = NodeProps<GraphNode>;
+
+export const ClusterNode = memo(function ClusterNode({
+  data,
+  selected,
+}: ClusterNodeProps) {
+  const { clusterSize = 0, expanded } = data;
+
+  // クラスタサイズに応じてノードサイズを調整
+  const baseSize = 70;
+  const size = Math.min(baseSize + clusterSize * 5, 120);
+
+  // 内部の核の数（最大8個）
+  const nucleiCount = Math.min(clusterSize, 8);
+
+  // 核の配置角度を計算
+  const nuclei = useMemo(() => {
+    return Array.from({ length: nucleiCount }).map((_, i) => {
+      const angle = (360 / nucleiCount) * i;
+      const delay = i * 0.5;
+      const orbitRadius = size * 0.28;
+      return { angle, delay, orbitRadius };
+    });
+  }, [nucleiCount, size]);
+
+  return (
+    <>
+      {/* 入力ハンドル */}
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!h-3 !w-3 !rounded-full !border-2 !bg-transparent transition-all duration-300"
+        style={{
+          borderColor: "hsl(185 100% 65%)",
+          boxShadow: "0 0 8px hsl(185 100% 65% / 0.4)",
+        }}
+      />
+
+      {/* クラスタ本体 */}
+      <div
+        className={cn(
+          "group relative flex cursor-pointer items-center justify-center",
+          "transition-all duration-500 ease-out",
+          "animate-membrane-morph",
+          selected &&
+            "ring-2 ring-primary ring-offset-4 ring-offset-background",
+        )}
+        style={{
+          width: size,
+          height: size,
+          background: expanded
+            ? "radial-gradient(circle at 40% 40%, hsl(185 100% 65% / 0.15), hsl(310 85% 60% / 0.08) 50%, transparent 70%)"
+            : "radial-gradient(circle at 40% 40%, hsl(220 30% 15% / 0.8), hsl(220 25% 10% / 0.6) 60%, transparent 80%)",
+          border: expanded
+            ? "2px solid hsl(185 100% 65% / 0.6)"
+            : "2px dashed hsl(200 30% 30%)",
+          boxShadow: expanded
+            ? "0 0 30px hsl(185 100% 65% / 0.3), inset 0 0 30px hsl(185 100% 65% / 0.1)"
+            : "0 0 20px hsl(220 30% 0% / 0.5), inset 0 0 20px hsl(220 30% 5% / 0.5)",
+        }}
+      >
+        {/* 外殻グロー */}
+        <div
+          className={cn(
+            "absolute -inset-3 rounded-full blur-lg transition-opacity duration-500",
+            expanded ? "opacity-40" : "opacity-20",
+          )}
+          style={{
+            backgroundColor: expanded
+              ? "hsl(185 100% 65%)"
+              : "hsl(200 30% 40%)",
+            borderRadius: "inherit",
+          }}
+        />
+
+        {/* 内部膜 */}
+        <div
+          className="absolute inset-3 rounded-full border border-dashed opacity-30"
+          style={{
+            borderColor: expanded ? "hsl(185 100% 65%)" : "hsl(200 30% 40%)",
+            borderRadius: "inherit",
+          }}
+        />
+
+        {/* 軌道を描く核 */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          {nuclei.map((nucleus, i) => (
+            <div
+              key={i}
+              className="absolute animate-nucleus-orbit"
+              style={{
+                animationDelay: `${-nucleus.delay}s`,
+                animationDuration: `${8 + i * 0.5}s`,
+              }}
+            >
+              <div
+                className="h-2.5 w-2.5 rounded-full animate-vesicle-release"
+                style={{
+                  backgroundColor: expanded
+                    ? `hsl(${185 + i * 15} 80% 60%)`
+                    : `hsl(${200 + i * 10} 50% 50%)`,
+                  boxShadow: expanded
+                    ? `0 0 8px hsl(${185 + i * 15} 80% 60% / 0.8)`
+                    : `0 0 4px hsl(${200 + i * 10} 50% 50% / 0.5)`,
+                  animationDelay: `${nucleus.delay * 0.3}s`,
+                  transform: `translateX(${nucleus.orbitRadius}px)`,
+                }}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* 中心核 - クラスタサイズ表示 */}
+        <div
+          className={cn(
+            "relative z-10 flex items-center justify-center rounded-full",
+            "border-2 backdrop-blur-sm transition-all duration-300",
+          )}
+          style={{
+            width: size * 0.4,
+            height: size * 0.4,
+            backgroundColor: expanded
+              ? "hsl(220 30% 8% / 0.9)"
+              : "hsl(220 30% 10% / 0.95)",
+            borderColor: expanded
+              ? "hsl(185 100% 65% / 0.8)"
+              : "hsl(200 30% 35%)",
+            boxShadow: expanded
+              ? "0 0 20px hsl(185 100% 65% / 0.4), inset 0 0 15px hsl(185 100% 65% / 0.1)"
+              : "0 0 10px hsl(220 30% 0% / 0.5)",
+          }}
+        >
+          <span
+            className={cn(
+              "text-sm font-bold transition-colors duration-300",
+              expanded ? "text-primary" : "text-muted-foreground",
+            )}
+          >
+            {clusterSize}
+          </span>
+        </div>
+
+        {/* 展開/折りたたみインジケータ */}
+        <div
+          className={cn(
+            "absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full",
+            "border-2 text-xs font-bold transition-all duration-300",
+          )}
+          style={{
+            backgroundColor: expanded
+              ? "hsl(185 100% 65%)"
+              : "hsl(220 30% 12%)",
+            borderColor: expanded ? "hsl(185 100% 70%)" : "hsl(200 30% 25%)",
+            color: expanded ? "hsl(220 30% 5%)" : "hsl(185 100% 65%)",
+            boxShadow: expanded
+              ? "0 0 15px hsl(185 100% 65% / 0.6)"
+              : "0 0 8px hsl(220 30% 0% / 0.5)",
+          }}
+        >
+          {expanded ? "−" : "+"}
+        </div>
+
+        {/* ホバーツールチップ */}
+        <div
+          className={cn(
+            "absolute -bottom-14 left-1/2 z-50 -translate-x-1/2",
+            "rounded-lg border border-border/50 bg-card/95 px-3 py-2 backdrop-blur-md",
+            "opacity-0 shadow-xl transition-all duration-300",
+            "group-hover:opacity-100 group-hover:-translate-y-1",
+          )}
+          style={{
+            boxShadow:
+              "0 4px 20px hsl(220 30% 0% / 0.5), 0 0 20px hsl(185 100% 65% / 0.2)",
+          }}
+        >
+          <p className="whitespace-nowrap text-xs font-medium text-foreground">
+            {clusterSize} branches
+          </p>
+          <p className="text-[10px] text-muted-foreground">
+            Click to {expanded ? "collapse" : "expand"}
+          </p>
+        </div>
+      </div>
+
+      {/* 出力ハンドル */}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!h-3 !w-3 !rounded-full !border-2 !bg-transparent transition-all duration-300"
+        style={{
+          borderColor: expanded ? "hsl(185 100% 65%)" : "hsl(200 30% 40%)",
+          boxShadow: expanded
+            ? "0 0 8px hsl(185 100% 65% / 0.4)"
+            : "0 0 6px hsl(200 30% 40% / 0.3)",
+        }}
+      />
+    </>
+  );
+});