@akiojin/gwt 4.12.1 → 6.0.0

package/src/web/client/src/components/common/index.ts

@@ -1,5 +0,0 @@
-export { PageHeader } from "./PageHeader";
-export { StatusBadge } from "./StatusBadge";
-export { MetricCard } from "./MetricCard";
-export { BranchCard } from "./BranchCard";
-export { SearchInput } from "./SearchInput";

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

@@ -1,152 +0,0 @@
-/**
- * ブランチ詳細パネル
- *
- * ノードクリック時に右側に表示されるサイドパネル
- */
-
-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

@@ -1,200 +0,0 @@
-/**
- * ブランチノードコンポーネント
- *
- * ソーマ（神経細胞体）をイメージした生物発光ノード
- * 多層グロー効果と有機的なアニメーションで生命感を表現
- */
-
-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

@@ -1,211 +0,0 @@
-/**
- * クラスタノードコンポーネント
- *
- * ニューロン群（神経細胞集合体）をイメージした有機的ノード
- * 変形する膜と軌道を描く核で複数ブランチのグループを表現
- */
-
-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)",
-        }}
-      />
-    </>
-  );
-});