@akiojin/gwt 4.12.1 → 6.0.0

package/src/web/client/src/components/branch-detail/TerminalPanel.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Terminal } from "../Terminal";
-import { cn } from "@/lib/utils";
-
-interface TerminalPanelProps {
-  sessionId: string | null;
-  isFullscreen: boolean;
-  onToggleFullscreen: () => void;
-  onExit: (code: number) => void;
-  onError: (message: string | null) => void;
-}
-
-export function TerminalPanel({
-  sessionId,
-  isFullscreen,
-  onToggleFullscreen,
-  onExit,
-  onError,
-}: TerminalPanelProps) {
-  if (!sessionId) {
-    return (
-      <Card className="h-full">
-        <CardHeader className="pb-2">
-          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            Terminal
-          </p>
-          <h3 className="text-lg font-semibold">セッションは未起動</h3>
-        </CardHeader>
-        <CardContent className="flex min-h-[200px] items-center justify-center">
-          <p className="text-center text-sm text-muted-foreground">
-            上部のアクションからAIツールを起動すると、
-            <br />
-            このエリアにターミナルが表示されます。
-          </p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card
-      className={cn(
-        "flex flex-col transition-all",
-        isFullscreen && "fixed inset-4 z-50 h-auto",
-      )}
-      data-testid="active-terminal"
-    >
-      <CardHeader className="flex-shrink-0 pb-2">
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Active Session
-            </p>
-            <h3 className="text-lg font-semibold">ターミナルセッション</h3>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="ghost" size="sm" onClick={onToggleFullscreen}>
-              {isFullscreen ? "通常表示に戻す" : "最大化"}
-            </Button>
-            {isFullscreen && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={onToggleFullscreen}
-                aria-label="ターミナルを閉じる"
-              >
-                ×
-              </Button>
-            )}
-          </div>
-        </div>
-        <p className="text-sm text-muted-foreground">
-          出力はリアルタイムにストリームされます。終了するとこのパネルは自動で閉じます。
-        </p>
-      </CardHeader>
-      <CardContent
-        className={cn("flex-1 overflow-hidden", isFullscreen && "h-full")}
-      >
-        <div
-          className={cn(
-            "h-full min-h-[300px] overflow-auto rounded-lg border bg-black p-4",
-            isFullscreen && "min-h-0",
-          )}
-        >
-          <Terminal sessionId={sessionId} onExit={onExit} onError={onError} />
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

package/src/web/client/src/components/branch-detail/ToolLauncher.tsx

@@ -1,332 +0,0 @@
-import React, { useMemo } from "react";
-import { Link } from "react-router-dom";
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { cn } from "@/lib/utils";
-import { getAgentTailwindClass } from "@/lib/coding-agent-colors";
-import type { ApiCodingAgent, Branch } from "../../../../../types/api.js";
-
-type ToolMode = "normal" | "continue" | "resume";
-
-export type SelectableTool =
-  | { id: "claude-code"; label: string; target: "claude" }
-  | { id: "codex-cli"; label: string; target: "codex" }
-  | { id: string; label: string; target: "custom"; definition: ApiCodingAgent };
-
-interface ToolSummary {
-  command: string;
-  defaultArgs?: string[] | null;
-  modeArgs?: {
-    normal?: string[];
-    continue?: string[];
-    resume?: string[];
-  };
-  permissionSkipArgs?: string[] | null;
-}
-
-interface ToolLauncherProps {
-  branch: Branch;
-  availableTools: SelectableTool[];
-  selectedToolId: string;
-  selectedMode: ToolMode;
-  skipPermissions: boolean;
-  extraArgsText: string;
-  isConfigLoading?: boolean;
-  configError?: Error | null;
-  isStartingSession: boolean;
-  isSyncingBranch: boolean;
-  needsRemoteSync: boolean;
-  hasConflictingDivergence: boolean;
-  onToolChange: (toolId: string) => void;
-  onModeChange: (mode: ToolMode) => void;
-  onSkipPermissionsChange: (skip: boolean) => void;
-  onExtraArgsChange: (args: string) => void;
-  onStartSession: () => void;
-  onSyncBranch: () => void;
-}
-
-const BUILTIN_TOOL_SUMMARIES: Record<string, ToolSummary> = {
-  "claude-code": {
-    command: "claude",
-    defaultArgs: [],
-    modeArgs: {
-      normal: [],
-      continue: ["-c"],
-      resume: ["-r"],
-    },
-    permissionSkipArgs: ["--dangerously-skip-permissions"],
-  },
-  "codex-cli": {
-    command: "codex",
-    defaultArgs: ["--auto-approve", "--verbose"],
-    modeArgs: {
-      normal: [],
-      continue: ["resume", "--last"],
-      resume: ["resume"],
-    },
-  },
-};
-
-export function ToolLauncher({
-  branch,
-  availableTools,
-  selectedToolId,
-  selectedMode,
-  skipPermissions,
-  extraArgsText,
-  isConfigLoading,
-  configError,
-  isStartingSession,
-  isSyncingBranch,
-  needsRemoteSync,
-  hasConflictingDivergence,
-  onToolChange,
-  onModeChange,
-  onSkipPermissionsChange,
-  onExtraArgsChange,
-  onStartSession,
-  onSyncBranch,
-}: ToolLauncherProps) {
-  const canStartSession = Boolean(branch.worktreePath);
-  const selectedTool = availableTools.find((t) => t.id === selectedToolId);
-
-  const selectedToolSummary: ToolSummary | null = useMemo(() => {
-    if (!selectedTool) return null;
-    if (selectedTool.target === "custom") {
-      return {
-        command: selectedTool.definition.command,
-        defaultArgs: selectedTool.definition.defaultArgs ?? null,
-        modeArgs: selectedTool.definition.modeArgs,
-        permissionSkipArgs: selectedTool.definition.permissionSkipArgs ?? null,
-      };
-    }
-    return BUILTIN_TOOL_SUMMARIES[selectedTool.id] ?? null;
-  }, [selectedTool]);
-
-  const argsPreview = useMemo(() => {
-    if (!selectedToolSummary) return null;
-    const args: string[] = [];
-    if (selectedToolSummary.defaultArgs?.length) {
-      args.push(...selectedToolSummary.defaultArgs);
-    }
-    const mode = selectedToolSummary.modeArgs?.[selectedMode];
-    if (mode?.length) args.push(...mode);
-    if (skipPermissions && selectedToolSummary.permissionSkipArgs?.length) {
-      args.push(...selectedToolSummary.permissionSkipArgs);
-    }
-    const extraArgs = extraArgsText
-      .split(/\s+/)
-      .map((c) => c.trim())
-      .filter(Boolean);
-    if (extraArgs.length) args.push(...extraArgs);
-    return { command: selectedToolSummary.command, args };
-  }, [selectedToolSummary, selectedMode, skipPermissions, extraArgsText]);
-
-  return (
-    <Card>
-      <CardHeader className="pb-3">
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Tool Launcher
-            </p>
-            <h3 className="mt-1 text-lg font-semibold">Coding Agent</h3>
-          </div>
-          {configError && <Badge variant="warning">設定の取得に失敗</Badge>}
-        </div>
-        <p className="mt-2 text-sm text-muted-foreground">
-          Web UI から直接 Coding Agent
-          を起動できます。設定したカスタムエージェントも一覧に表示されます。
-        </p>
-      </CardHeader>
-
-      <CardContent className="space-y-4">
-        {!canStartSession ? (
-          <p className="py-4 text-center text-sm text-muted-foreground">
-            Worktreeが未作成のため、先にWorktreeを作成してください。
-          </p>
-        ) : (
-          <>
-            {/* Form Grid */}
-            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              <div className="space-y-2">
-                <label className="text-sm font-medium">Coding Agent</label>
-                <Select
-                  value={selectedToolId}
-                  onValueChange={onToolChange}
-                  disabled={isConfigLoading ?? false}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select Coding Agent" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {availableTools.map((tool) => (
-                      <SelectItem
-                        key={tool.id}
-                        value={tool.id}
-                        className={getAgentTailwindClass(tool.id)}
-                      >
-                        {tool.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="space-y-2">
-                <label className="text-sm font-medium">起動モード</label>
-                <Select
-                  value={selectedMode}
-                  onValueChange={(v) => onModeChange(v as ToolMode)}
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="normal">Normal</SelectItem>
-                    <SelectItem value="continue">Continue</SelectItem>
-                    <SelectItem value="resume">Resume</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="space-y-2 sm:col-span-2 lg:col-span-1">
-                <label className="text-sm font-medium">追加引数</label>
-                <Input
-                  type="text"
-                  value={extraArgsText}
-                  onChange={(e) => onExtraArgsChange(e.target.value)}
-                  placeholder="--flag value"
-                />
-              </div>
-            </div>
-
-            {/* Skip Permissions Checkbox */}
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="checkbox"
-                checked={skipPermissions}
-                onChange={(e) => onSkipPermissionsChange(e.target.checked)}
-                className="h-4 w-4 rounded border-border"
-              />
-              <span>権限チェックをスキップ (自己責任)</span>
-            </label>
-
-            {skipPermissions && (
-              <Alert variant="warning">
-                <AlertDescription>
-                  権限チェックをスキップすることで、CLI での
-                  `--dangerously-skip-permissions`
-                  指定と同様のリスクを負います。
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {needsRemoteSync && (
-              <Alert variant="info" data-testid="sync-required">
-                <AlertDescription>
-                  <p>
-                    リモートに未取得の更新 ({branch.divergence?.behind ?? 0}{" "}
-                    commits) があるため、Coding Agent
-                    を起動する前に同期してください。
-                  </p>
-                  <p className="mt-1 text-xs text-muted-foreground">
-                    CLI の `git fetch --all` と `git pull --ff-only`
-                    と同じ処理を Web UI から実行できます。
-                  </p>
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {hasConflictingDivergence && (
-              <Alert variant="warning" data-testid="divergence-warning">
-                <AlertDescription>
-                  <p>
-                    リモートとローカルの両方に未解決の差分があります。起動は可能ですが、
-                    衝突を避けるために差分の解消を推奨します。
-                  </p>
-                  <ul className="mt-2 list-inside list-disc text-xs text-muted-foreground">
-                    <li>
-                      git fetch && git pull --ff-only origin {branch.name}
-                    </li>
-                    <li>git push origin {branch.name} でローカル進捗を共有</li>
-                  </ul>
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {/* Action Buttons */}
-            <div className="flex flex-wrap gap-2 pt-2">
-              <Button
-                onClick={onStartSession}
-                disabled={
-                  isStartingSession ||
-                  !selectedTool ||
-                  needsRemoteSync ||
-                  isSyncingBranch
-                }
-              >
-                {isStartingSession ? "起動中..." : "セッションを起動"}
-              </Button>
-              <Button
-                variant="secondary"
-                onClick={onSyncBranch}
-                disabled={!branch.worktreePath || isSyncingBranch}
-              >
-                {isSyncingBranch ? "同期中..." : "最新の変更を同期"}
-              </Button>
-              <Button variant="ghost" asChild>
-                <Link to="/config">設定を編集</Link>
-              </Button>
-            </div>
-
-            {/* Command Preview */}
-            {selectedToolSummary && (
-              <div className="space-y-2 rounded-lg border bg-muted/30 p-4">
-                <div className="grid gap-2 text-sm sm:grid-cols-2">
-                  <div>
-                    <span className="text-muted-foreground">コマンド:</span>{" "}
-                    <code className="rounded bg-muted px-1.5 py-0.5 font-mono">
-                      {selectedToolSummary.command}
-                    </code>
-                  </div>
-                  <div>
-                    <span className="text-muted-foreground">defaultArgs:</span>{" "}
-                    <span
-                      className={cn(
-                        !selectedToolSummary.defaultArgs?.length &&
-                          "text-muted-foreground/50",
-                      )}
-                    >
-                      {selectedToolSummary.defaultArgs?.join(" ") || "未設定"}
-                    </span>
-                  </div>
-                </div>
-                {argsPreview && (
-                  <div className="border-t pt-2">
-                    <span className="text-xs text-muted-foreground">
-                      最終コマンド:
-                    </span>
-                    <pre className="mt-1 overflow-x-auto rounded bg-background p-2 font-mono text-sm">
-                      {argsPreview.command} {argsPreview.args.join(" ")}
-                    </pre>
-                  </div>
-                )}
-              </div>
-            )}
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/web/client/src/components/branch-detail/index.ts

@@ -1,4 +0,0 @@
-export { SessionHistoryTable } from "./SessionHistoryTable";
-export { ToolLauncher, type SelectableTool } from "./ToolLauncher";
-export { BranchInfoCards } from "./BranchInfoCards";
-export { TerminalPanel } from "./TerminalPanel";

package/src/web/client/src/components/common/BranchCard.tsx

@@ -1,117 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardFooter,
-} from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-
-interface BranchCardProps {
-  name: string;
-  type: "local" | "remote" | "both";
-  isProtected?: boolean;
-  hasWorktree?: boolean;
-  lastCommit?: string;
-  lastCommitDate?: string;
-  ahead?: number;
-  behind?: number;
-  merged?: boolean;
-  href?: string;
-  className?: string;
-}
-
-export function BranchCard({
-  name,
-  type,
-  isProtected,
-  hasWorktree,
-  lastCommit,
-  lastCommitDate,
-  ahead,
-  behind,
-  merged,
-  href,
-  className,
-}: BranchCardProps) {
-  const content = (
-    <Card
-      className={cn(
-        "transition-colors hover:border-muted-foreground/30",
-        className,
-      )}
-    >
-      <CardHeader className="pb-2">
-        <div className="flex items-start justify-between gap-2">
-          <div className="min-w-0 flex-1">
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Branch
-            </p>
-            <h3 className="mt-1 truncate text-sm font-semibold">{name}</h3>
-          </div>
-          <div className="flex flex-wrap gap-1">
-            {type === "local" && <Badge variant="local">Local</Badge>}
-            {type === "remote" && <Badge variant="remote">Remote</Badge>}
-            {type === "both" && (
-              <>
-                <Badge variant="local">L</Badge>
-                <Badge variant="remote">R</Badge>
-              </>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="py-2">
-        {lastCommit && (
-          <p className="line-clamp-2 text-xs text-muted-foreground">
-            {lastCommit}
-          </p>
-        )}
-      </CardContent>
-      <CardFooter className="flex flex-wrap gap-2 pt-2">
-        {isProtected && (
-          <Badge variant="warning" className="text-xs">
-            Protected
-          </Badge>
-        )}
-        {hasWorktree && (
-          <Badge variant="success" className="text-xs">
-            Worktree
-          </Badge>
-        )}
-        {merged && (
-          <Badge variant="secondary" className="text-xs">
-            Merged
-          </Badge>
-        )}
-        {ahead !== undefined && ahead > 0 && (
-          <Badge variant="outline" className="text-xs">
-            ↑{ahead}
-          </Badge>
-        )}
-        {behind !== undefined && behind > 0 && (
-          <Badge variant="outline" className="text-xs">
-            ↓{behind}
-          </Badge>
-        )}
-        {lastCommitDate && (
-          <span className="ml-auto text-xs text-muted-foreground">
-            {lastCommitDate}
-          </span>
-        )}
-      </CardFooter>
-    </Card>
-  );
-
-  if (href) {
-    return (
-      <Link to={href} className="block">
-        {content}
-      </Link>
-    );
-  }
-
-  return content;
-}

package/src/web/client/src/components/common/MetricCard.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-import { Card } from "@/components/ui/card";
-import { cn } from "@/lib/utils";
-
-interface MetricCardProps {
-  label: string;
-  value: string | number;
-  hint?: string;
-  className?: string;
-}
-
-export function MetricCard({ label, value, hint, className }: MetricCardProps) {
-  return (
-    <Card className={cn("p-5", className)}>
-      <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-        {label}
-      </p>
-      <p className="mt-1 text-3xl font-semibold tabular-nums">{value}</p>
-      {hint && <p className="mt-1 text-xs text-muted-foreground">{hint}</p>}
-    </Card>
-  );
-}

package/src/web/client/src/components/common/PageHeader.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { cn } from "@/lib/utils";
-
-interface PageHeaderProps {
-  eyebrow?: string;
-  title: string;
-  subtitle?: string;
-  actions?: React.ReactNode;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export function PageHeader({
-  eyebrow,
-  title,
-  subtitle,
-  actions,
-  children,
-  className,
-}: PageHeaderProps) {
-  return (
-    <header
-      className={cn("border-b border-border bg-card/50 px-6 py-8", className)}
-    >
-      <div className="mx-auto max-w-7xl">
-        {eyebrow && (
-          <p className="mb-2 text-xs font-medium uppercase tracking-widest text-muted-foreground">
-            {eyebrow}
-          </p>
-        )}
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div>
-            <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
-            {subtitle && (
-              <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
-            )}
-            {children}
-          </div>
-          {actions && <div className="flex gap-2">{actions}</div>}
-        </div>
-      </div>
-    </header>
-  );
-}

package/src/web/client/src/components/common/SearchInput.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { Search } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-
-interface SearchInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-  count?: { filtered: number; total: number };
-}
-
-export function SearchInput({
-  value,
-  onChange,
-  placeholder = "Search...",
-  className,
-  count,
-}: SearchInputProps) {
-  return (
-    <div className={cn("flex items-center gap-3", className)}>
-      <div className="relative flex-1">
-        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          type="text"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={placeholder}
-          className="pl-9"
-        />
-      </div>
-      {count && (
-        <span className="text-sm text-muted-foreground">
-          {count.filtered} / {count.total}
-        </span>
-      )}
-    </div>
-  );
-}

package/src/web/client/src/components/common/StatusBadge.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-
-type StatusType =
-  | "local"
-  | "remote"
-  | "success"
-  | "warning"
-  | "muted"
-  | "default";
-
-interface StatusBadgeProps {
-  status: StatusType;
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function StatusBadge({ status, children, className }: StatusBadgeProps) {
-  const variantMap: Record<
-    StatusType,
-    "local" | "remote" | "success" | "warning" | "secondary" | "default"
-  > = {
-    local: "local",
-    remote: "remote",
-    success: "success",
-    warning: "warning",
-    muted: "secondary",
-    default: "default",
-  };
-
-  return (
-    <Badge variant={variantMap[status]} className={cn(className)}>
-      {children}
-    </Badge>
-  );
-}