@akiojin/gwt 4.1.1 → 4.3.0

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

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

@@ -0,0 +1,171 @@
+/**
+ * シナプティックキャンバス
+ *
+ * React Flowベースのブランチグラフ表示コンテナ
+ * パン/ズーム/ミニマップを提供
+ */
+
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  useNodesState,
+  useEdgesState,
+  type NodeMouseHandler,
+  BackgroundVariant,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+import type { Branch } from "../../../../../types/api.js";
+import { BranchNode } from "./BranchNode";
+import { ClusterNode } from "./ClusterNode";
+import { SynapticEdge } from "./SynapticEdge";
+import { branchesToGraph, type GraphNode, type GraphEdge } from "./graphUtils";
+
+/** カスタムノードタイプ */
+const nodeTypes = {
+  branch: BranchNode,
+  cluster: ClusterNode,
+};
+
+/** カスタムエッジタイプ */
+const edgeTypes = {
+  synaptic: SynapticEdge,
+};
+
+interface SynapticCanvasProps {
+  branches: Branch[];
+  onNodeClick?: (branch: Branch | null) => void;
+  className?: string;
+}
+
+export function SynapticCanvas({
+  branches,
+  onNodeClick,
+  className,
+}: SynapticCanvasProps) {
+  const [nodes, setNodes, onNodesChange] = useNodesState<GraphNode>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<GraphEdge>([]);
+  const [expandedClusters, setExpandedClusters] = useState<Set<string>>(
+    new Set(),
+  );
+  const [isLayouting, setIsLayouting] = useState(false);
+
+  // レイアウト計算
+  useEffect(() => {
+    if (branches.length === 0) return;
+
+    setIsLayouting(true);
+
+    // キャンバスサイズ（仮）
+    const width = 800;
+    const height = 600;
+
+    branchesToGraph(branches, expandedClusters, width, height)
+      .then(({ nodes: newNodes, edges: newEdges }) => {
+        setNodes(newNodes);
+        setEdges(newEdges);
+      })
+      .catch((error) => {
+        console.error("Failed to calculate graph layout:", error);
+      })
+      .finally(() => {
+        setIsLayouting(false);
+      });
+  }, [branches, expandedClusters, setNodes, setEdges]);
+
+  // ノードクリックハンドラ
+  const handleNodeClick: NodeMouseHandler<GraphNode> = useCallback(
+    (event, node) => {
+      if (node.data.isCluster) {
+        // クラスタノード: 展開/折りたたみ
+        setExpandedClusters((prev) => {
+          const next = new Set(prev);
+          if (next.has(node.id)) {
+            next.delete(node.id);
+          } else {
+            next.add(node.id);
+          }
+          return next;
+        });
+      } else {
+        // ブランチノード: 詳細パネル表示
+        onNodeClick?.(node.data.branch ?? null);
+      }
+    },
+    [onNodeClick],
+  );
+
+  // ミニマップのノードカラー
+  const minimapNodeColor = useCallback((node: GraphNode) => {
+    if (node.data.isCluster) {
+      return "hsl(var(--muted-foreground))";
+    }
+    if (node.data.branch?.worktreePath) {
+      return "hsl(var(--success))";
+    }
+    if (node.data.branch?.type === "local") {
+      return "hsl(var(--local))";
+    }
+    return "hsl(var(--remote))";
+  }, []);
+
+  return (
+    <div className={className} style={{ width: "100%", height: "100%" }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={handleNodeClick}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        fitView
+        fitViewOptions={{
+          padding: 0.2,
+          maxZoom: 1.5,
+        }}
+        minZoom={0.1}
+        maxZoom={2}
+        attributionPosition="bottom-left"
+        proOptions={{ hideAttribution: true }}
+        className="bg-gradient-to-br from-background via-background to-muted/20"
+      >
+        {/* 背景グリッド */}
+        <Background
+          variant={BackgroundVariant.Dots}
+          gap={20}
+          size={1}
+          color="hsl(var(--muted-foreground) / 0.15)"
+        />
+
+        {/* コントロール */}
+        <Controls
+          showInteractive={false}
+          className="!bg-card !border !border-border !shadow-md"
+        />
+
+        {/* ミニマップ */}
+        <MiniMap
+          nodeColor={minimapNodeColor}
+          maskColor="hsl(var(--background) / 0.8)"
+          className="!bg-card !border !border-border !shadow-md"
+        />
+      </ReactFlow>
+
+      {/* ローディングオーバーレイ */}
+      {isLayouting && (
+        <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm">
+          <div className="flex items-center gap-2 rounded-lg bg-card px-4 py-2 shadow-lg">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            <span className="text-sm text-muted-foreground">
+              Calculating layout...
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,311 @@
+/**
+ * シナプスエッジコンポーネント
+ *
+ * 神経細胞の軸索（アクソン）をイメージした脈動するエッジ
+ * 神経伝達物質の放出と伝播を表現するアニメーション
+ */
+
+import React, { memo, useMemo } from "react";
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getBezierPath,
+  type EdgeProps,
+} from "@xyflow/react";
+import type { GraphEdge } from "./graphUtils";
+
+type SynapticEdgeProps = EdgeProps<GraphEdge>;
+
+export const SynapticEdge = memo(function SynapticEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+}: SynapticEdgeProps) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    curvature: 0.25,
+  });
+
+  // エッジの長さに基づいてパーティクル数を調整
+  const edgeLength = useMemo(() => {
+    const dx = targetX - sourceX;
+    const dy = targetY - sourceY;
+    return Math.sqrt(dx * dx + dy * dy);
+  }, [sourceX, sourceY, targetX, targetY]);
+
+  const particleCount = Math.max(2, Math.min(4, Math.floor(edgeLength / 100)));
+
+  return (
+    <>
+      {/* 外側グロー - 深い影 */}
+      <BaseEdge
+        id={`${id}-outer-glow`}
+        path={edgePath}
+        style={{
+          ...style,
+          strokeWidth: 12,
+          stroke: "hsl(185 100% 65% / 0.08)",
+          filter: "blur(8px)",
+        }}
+      />
+
+      {/* 中間グロー */}
+      <BaseEdge
+        id={`${id}-mid-glow`}
+        path={edgePath}
+        style={{
+          ...style,
+          strokeWidth: 6,
+          stroke: "hsl(185 100% 65% / 0.15)",
+          filter: "blur(4px)",
+        }}
+      />
+
+      {/* メインエッジ - 軸索 */}
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        {...(markerEnd ? { markerEnd } : {})}
+        style={{
+          ...style,
+          strokeWidth: 2,
+          stroke: "hsl(185 100% 65% / 0.5)",
+          strokeLinecap: "round",
+        }}
+      />
+
+      {/* 内側の明るいコア */}
+      <BaseEdge
+        id={`${id}-core`}
+        path={edgePath}
+        style={{
+          ...style,
+          strokeWidth: 1,
+          stroke: "hsl(185 100% 75% / 0.6)",
+          strokeLinecap: "round",
+        }}
+      />
+
+      {/* SVGアニメーション定義 */}
+      <EdgeLabelRenderer>
+        <svg
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            overflow: "visible",
+          }}
+        >
+          <defs>
+            {/* 神経伝達物質パルスグラデーション */}
+            <linearGradient
+              id={`vesicle-pulse-${id}`}
+              x1="0%"
+              y1="0%"
+              x2="100%"
+              y2="0%"
+            >
+              <stop offset="0%" stopColor="transparent">
+                <animate
+                  attributeName="offset"
+                  values="-0.3;1"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="5%" stopColor="hsl(185 100% 70% / 0.3)">
+                <animate
+                  attributeName="offset"
+                  values="-0.25;1.05"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="10%" stopColor="hsl(185 100% 80%)">
+                <animate
+                  attributeName="offset"
+                  values="-0.2;1.1"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="15%" stopColor="hsl(185 100% 70% / 0.3)">
+                <animate
+                  attributeName="offset"
+                  values="-0.15;1.15"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="20%" stopColor="transparent">
+                <animate
+                  attributeName="offset"
+                  values="-0.1;1.2"
+                  dur="2.5s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+            </linearGradient>
+
+            {/* 二次パルス（シナプス間隙） */}
+            <linearGradient
+              id={`synapse-pulse-${id}`}
+              x1="0%"
+              y1="0%"
+              x2="100%"
+              y2="0%"
+            >
+              <stop offset="0%" stopColor="transparent">
+                <animate
+                  attributeName="offset"
+                  values="-0.4;1"
+                  dur="3s"
+                  begin="0.8s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="8%" stopColor="hsl(310 85% 65% / 0.6)">
+                <animate
+                  attributeName="offset"
+                  values="-0.32;1.08"
+                  dur="3s"
+                  begin="0.8s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+              <stop offset="16%" stopColor="transparent">
+                <animate
+                  attributeName="offset"
+                  values="-0.24;1.16"
+                  dur="3s"
+                  begin="0.8s"
+                  repeatCount="indefinite"
+                />
+              </stop>
+            </linearGradient>
+
+            {/* グロー効果フィルター */}
+            <filter
+              id={`glow-${id}`}
+              x="-50%"
+              y="-50%"
+              width="200%"
+              height="200%"
+            >
+              <feGaussianBlur stdDeviation="2" result="coloredBlur" />
+              <feMerge>
+                <feMergeNode in="coloredBlur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+
+          {/* メインパルス */}
+          <path
+            d={edgePath}
+            fill="none"
+            stroke={`url(#vesicle-pulse-${id})`}
+            strokeWidth={4}
+            strokeLinecap="round"
+            filter={`url(#glow-${id})`}
+            style={{ mixBlendMode: "screen" }}
+          />
+
+          {/* セカンダリパルス（マゼンタ） */}
+          <path
+            d={edgePath}
+            fill="none"
+            stroke={`url(#synapse-pulse-${id})`}
+            strokeWidth={3}
+            strokeLinecap="round"
+            style={{ mixBlendMode: "screen" }}
+          />
+        </svg>
+      </EdgeLabelRenderer>
+
+      {/* 流れるパーティクル（神経伝達物質） - SVG animateMotion使用 */}
+      <EdgeLabelRenderer>
+        <svg
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+            overflow: "visible",
+          }}
+        >
+          {Array.from({ length: particleCount }).map((_, i) => (
+            <circle
+              key={i}
+              r={3 - i * 0.3}
+              fill="hsl(185 100% 80%)"
+              opacity={0}
+            >
+              <animateMotion
+                dur={`${2 + i * 0.3}s`}
+                repeatCount="indefinite"
+                path={edgePath}
+                begin={`${i * 0.6}s`}
+              />
+              <animate
+                attributeName="opacity"
+                values="0;1;1;0"
+                keyTimes="0;0.1;0.9;1"
+                dur={`${2 + i * 0.3}s`}
+                repeatCount="indefinite"
+                begin={`${i * 0.6}s`}
+              />
+            </circle>
+          ))}
+        </svg>
+      </EdgeLabelRenderer>
+
+      {/* シナプス接合点グロー */}
+      <EdgeLabelRenderer>
+        <div
+          className="absolute"
+          style={{
+            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          }}
+        >
+          {/* 外側の拡散グロー */}
+          <div
+            className="absolute -inset-3 rounded-full opacity-30"
+            style={{
+              background:
+                "radial-gradient(circle, hsl(185 100% 65%) 0%, transparent 70%)",
+              animation: "synapse-spark 3s ease-in-out infinite",
+            }}
+          />
+          {/* 中心核 */}
+          <div
+            className="h-2 w-2 rounded-full"
+            style={{
+              background:
+                "radial-gradient(circle at 30% 30%, hsl(185 100% 80%), hsl(185 100% 60%))",
+              boxShadow:
+                "0 0 10px hsl(185 100% 65% / 0.8), 0 0 20px hsl(185 100% 65% / 0.4)",
+              animation: "vesicle-release 2s ease-in-out infinite",
+            }}
+          />
+        </div>
+      </EdgeLabelRenderer>
+    </>
+  );
+});