@akiojin/gwt 4.1.1 → 4.3.0

package/src/web/client/src/components/BranchGraph.tsx

@@ -1,89 +1,31 @@
-import React, { useMemo } from "react";
-import { Link } from "react-router-dom";
+/**
+ * ブランチグラフ - シナプス風ビジュアライゼーション
+ *
+ * React Flow + D3-forceによるインタラクティブなブランチ関係図
+ */
+
+import React, { useState, useCallback } from "react";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
 import type { Branch } from "../../../../types/api.js";
-
-const UNKNOWN_BASE = "__unknown__";
-
-interface Lane {
-  id: string;
-  baseLabel: string;
-  baseNode: Branch | null;
-  nodes: Branch[];
-  isSyntheticBase: boolean;
-}
+import { SynapticCanvas, BranchDetailPanel } from "./graph";
 
 interface BranchGraphProps {
   branches: Branch[];
 }
 
-function formatBranchLabel(branch: Branch): string {
-  return branch.name.length > 32
-    ? `${branch.name.slice(0, 29)}...`
-    : branch.name;
-}
-
-function getDivergenceLabel(branch: Branch): string {
-  if (!branch.divergence) {
-    return "divergence: n/a";
-  }
-  const { ahead, behind, upToDate } = branch.divergence;
-  if (upToDate) {
-    return "divergence: up-to-date";
-  }
-  return `divergence: +${ahead} / -${behind}`;
-}
-
 export function BranchGraph({ branches }: BranchGraphProps) {
-  const branchMap = useMemo(() => {
-    return new Map(branches.map((branch) => [branch.name, branch]));
-  }, [branches]);
-
-  const referencedBases = useMemo(() => {
-    const baseSet = new Set<string>();
-    branches.forEach((branch) => {
-      if (branch.baseBranch) {
-        baseSet.add(branch.baseBranch);
-      }
-    });
-    return baseSet;
-  }, [branches]);
-
-  const lanes = useMemo<Lane[]>(() => {
-    const laneMap = new Map<string, Lane>();
-
-    branches.forEach((branch) => {
-      const base = branch.baseBranch ?? UNKNOWN_BASE;
+  const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null);
 
-      if (!branch.baseBranch && referencedBases.has(branch.name)) {
-        return;
-      }
+  const handleNodeClick = useCallback((branch: Branch | null) => {
+    setSelectedBranch(branch);
+  }, []);
 
-      if (!laneMap.has(base)) {
-        const baseNode =
-          base !== UNKNOWN_BASE ? (branchMap.get(base) ?? null) : null;
-        laneMap.set(base, {
-          id: base,
-          baseLabel: base === UNKNOWN_BASE ? "ベース不明" : base,
-          baseNode,
-          nodes: [],
-          isSyntheticBase: baseNode === null,
-        });
-      }
+  const handlePanelClose = useCallback(() => {
+    setSelectedBranch(null);
+  }, []);
 
-      laneMap.get(base)?.nodes.push(branch);
-    });
-
-    return Array.from(laneMap.values()).sort((a, b) => {
-      if (a.id === UNKNOWN_BASE) return 1;
-      if (b.id === UNKNOWN_BASE) return -1;
-      return a.baseLabel.localeCompare(b.baseLabel, "ja");
-    });
-  }, [branches, branchMap, referencedBases]);
-
-  if (!lanes.length) {
+  if (!branches.length) {
     return (
       <Card className="border-dashed">
         <CardContent className="flex flex-col items-center justify-center py-12 text-center">
@@ -99,154 +41,55 @@ export function BranchGraph({ branches }: BranchGraphProps) {
   }
 
   return (
-    <Card>
+    <Card className="relative overflow-hidden">
       <CardHeader className="pb-4">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div>
             <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              BRANCH GRAPH
+              SYNAPTIC GRAPH
             </p>
-            <h2 className="mt-1 text-lg font-semibold">
-              ベースブランチの関係をグラフィカルに把握
-            </h2>
+            <h2 className="mt-1 text-lg font-semibold">ブランチネットワーク</h2>
             <p className="mt-1 text-sm text-muted-foreground">
-              baseRef、Git
-              upstream、merge-baseヒューリスティクスを用いて推定したベースブランチ単位で派生ノードをレーン表示します。
+              クリックでノードを展開・詳細表示。ドラッグで移動、スクロールでズーム。
             </p>
           </div>
           <div className="flex flex-wrap gap-2">
-            <Badge variant="outline">Base</Badge>
-            <Badge variant="local">Local</Badge>
-            <Badge variant="remote">Remote</Badge>
-            <Badge variant="success">Worktree</Badge>
+            <Badge variant="outline" className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full bg-muted-foreground/30" />
+              Cluster
+            </Badge>
+            <Badge variant="local" className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full bg-local" />
+              Local
+            </Badge>
+            <Badge variant="remote" className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full bg-remote" />
+              Remote
+            </Badge>
+            <Badge variant="success" className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full bg-success" />
+              Worktree
+            </Badge>
           </div>
         </div>
       </CardHeader>
 
-      <CardContent className="space-y-4">
-        {lanes.map((lane) => (
-          <article key={lane.id} className="rounded-lg border bg-muted/30 p-4">
-            <div className="mb-3 flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="font-semibold">{lane.baseLabel}</span>
-                {lane.baseNode && (
-                  <Badge
-                    variant={
-                      lane.baseNode.type === "local" ? "local" : "remote"
-                    }
-                    className="text-xs"
-                  >
-                    {lane.baseNode.type === "local" ? "LOCAL" : "REMOTE"}
-                  </Badge>
-                )}
-                {lane.isSyntheticBase && (
-                  <Badge
-                    variant="outline"
-                    className="text-xs text-muted-foreground"
-                  >
-                    推定のみ
-                  </Badge>
-                )}
-              </div>
-              <span className="text-sm text-muted-foreground">
-                {lane.nodes.length} branch{lane.nodes.length > 1 ? "es" : ""}
-              </span>
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              {renderBaseNode(lane)}
-              {lane.nodes.map((branch) => (
-                <BranchNode key={branch.name} branch={branch} />
-              ))}
-            </div>
-          </article>
-        ))}
+      <CardContent className="relative p-0">
+        {/* キャンバスコンテナ */}
+        <div className="relative h-[500px] w-full">
+          <SynapticCanvas
+            branches={branches}
+            onNodeClick={handleNodeClick}
+            className="h-full w-full"
+          />
+
+          {/* 詳細パネル */}
+          <BranchDetailPanel
+            branch={selectedBranch}
+            onClose={handlePanelClose}
+          />
+        </div>
       </CardContent>
     </Card>
   );
 }
-
-function renderBaseNode(lane: Lane) {
-  const label =
-    lane.baseLabel === "ベース不明" ? "Unknown base" : lane.baseLabel;
-
-  const content = (
-    <div
-      className={cn(
-        "group relative rounded-md border bg-card px-3 py-2 transition-colors hover:border-muted-foreground/50",
-        lane.baseNode?.type === "local" && "border-l-2 border-l-local",
-        lane.baseNode?.type === "remote" && "border-l-2 border-l-remote",
-      )}
-    >
-      <span className="block truncate text-sm font-medium">{label}</span>
-      <span className="text-xs text-muted-foreground">BASE</span>
-
-      {/* Tooltip */}
-      <div className="invisible absolute bottom-full left-0 z-10 mb-2 w-48 rounded-md border bg-popover p-2 text-xs shadow-md group-hover:visible">
-        <p className="font-medium">{label}</p>
-        <p className="text-muted-foreground">
-          {lane.baseNode
-            ? `type: ${lane.baseNode.type}`
-            : "推定されたベースブランチ"}
-        </p>
-      </div>
-    </div>
-  );
-
-  if (lane.baseNode) {
-    return (
-      <Link
-        key={`base-${lane.id}`}
-        to={`/${encodeURIComponent(lane.baseNode.name)}`}
-        className="block"
-        aria-label={`ベースブランチ ${lane.baseNode.name} を開く`}
-      >
-        {content}
-      </Link>
-    );
-  }
-
-  return <div key={`base-${lane.id}`}>{content}</div>;
-}
-
-function BranchNode({ branch }: { branch: Branch }) {
-  const node = (
-    <div
-      className={cn(
-        "group relative rounded-md border bg-card px-3 py-2 transition-colors hover:border-muted-foreground/50",
-        branch.type === "local" && "border-l-2 border-l-local",
-        branch.type === "remote" && "border-l-2 border-l-remote",
-        branch.mergeStatus === "merged" && "opacity-60",
-      )}
-    >
-      <span className="block truncate text-sm font-medium">
-        {formatBranchLabel(branch)}
-      </span>
-      <span className="text-xs text-muted-foreground">
-        {branch.worktreePath ? "Worktree" : "No Worktree"}
-      </span>
-
-      {/* Tooltip */}
-      <div className="invisible absolute bottom-full left-0 z-10 mb-2 w-56 rounded-md border bg-popover p-2 text-xs shadow-md group-hover:visible">
-        <p className="font-medium">{branch.name}</p>
-        <p className="text-muted-foreground">
-          base: {branch.baseBranch ?? "unknown"}
-        </p>
-        <p className="text-muted-foreground">{getDivergenceLabel(branch)}</p>
-        <p className="text-muted-foreground">
-          {branch.worktreePath ?? "Worktree未作成"}
-        </p>
-      </div>
-    </div>
-  );
-
-  return (
-    <Link
-      to={`/${encodeURIComponent(branch.name)}`}
-      className="block"
-      aria-label={`${branch.name} の詳細を開く`}
-    >
-      {node}
-    </Link>
-  );
-}

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}`,
+        }}
+      />
+    </>
+  );
+});