@akiojin/gwt 2.12.1 → 2.14.0

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

@@ -0,0 +1,181 @@
+import React from "react";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+
+interface SessionInfo {
+  sessionId: string;
+  worktreePath: string;
+  toolType: string;
+  toolName?: string | null;
+  mode?: string;
+  status: "pending" | "running" | "completed" | "failed";
+  startedAt?: string;
+  endedAt?: string | null;
+}
+
+interface SessionHistoryTableProps {
+  sessions: SessionInfo[];
+  isLoading?: boolean;
+  terminatingSessionId: string | null;
+  isDeleting?: boolean;
+  onTerminate: (sessionId: string) => void;
+  onSelectSession: (sessionId: string) => void;
+}
+
+const SESSION_STATUS_VARIANT: Record<
+  SessionInfo["status"],
+  "default" | "success" | "warning" | "destructive" | "outline"
+> = {
+  pending: "outline",
+  running: "success",
+  completed: "default",
+  failed: "destructive",
+};
+
+const SESSION_STATUS_LABEL: Record<SessionInfo["status"], string> = {
+  pending: "Pending",
+  running: "Running",
+  completed: "Completed",
+  failed: "Failed",
+};
+
+function formatDate(value?: string | null): string {
+  if (!value) return "--";
+  try {
+    return new Intl.DateTimeFormat("ja-JP", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(new Date(value));
+  } catch {
+    return value;
+  }
+}
+
+function toolLabel(toolType: string, toolName?: string | null): string {
+  if (toolType === "custom") return toolName ?? "Custom";
+  if (toolType === "codex-cli") return "Codex CLI";
+  return "Claude Code";
+}
+
+export function SessionHistoryTable({
+  sessions,
+  isLoading,
+  terminatingSessionId,
+  isDeleting,
+  onTerminate,
+  onSelectSession,
+}: SessionHistoryTableProps) {
+  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">
+              Session History
+            </p>
+            <h3 className="mt-1 text-lg font-semibold">セッション履歴</h3>
+          </div>
+          {isLoading && (
+            <Badge variant="outline" className="animate-pulse">
+              読み込み中...
+            </Badge>
+          )}
+        </div>
+        <p className="mt-2 text-sm text-muted-foreground">
+          この Worktree に紐づいた AI セッション履歴です。CLI
+          からの起動分も共有されます。
+        </p>
+      </CardHeader>
+      <CardContent>
+        {sessions.length === 0 ? (
+          <p className="py-8 text-center text-sm text-muted-foreground">
+            セッション履歴はまだありません。
+          </p>
+        ) : (
+          <div className="overflow-x-auto rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-24">状態</TableHead>
+                  <TableHead>ツール</TableHead>
+                  <TableHead className="w-20">モード</TableHead>
+                  <TableHead>開始</TableHead>
+                  <TableHead>終了</TableHead>
+                  <TableHead className="w-24 text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sessions.slice(0, 5).map((session) => (
+                  <TableRow
+                    key={session.sessionId}
+                    className="cursor-pointer hover:bg-muted/50"
+                    onClick={() => {
+                      if (session.status === "running") {
+                        onSelectSession(session.sessionId);
+                      }
+                    }}
+                  >
+                    <TableCell>
+                      <Badge variant={SESSION_STATUS_VARIANT[session.status]}>
+                        {SESSION_STATUS_LABEL[session.status]}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="font-medium">
+                      {toolLabel(session.toolType, session.toolName)}
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-muted-foreground">
+                        {session.mode}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {formatDate(session.startedAt)}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground">
+                      {formatDate(session.endedAt)}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {session.status === "running" ? (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            onTerminate(session.sessionId);
+                          }}
+                          disabled={
+                            terminatingSessionId === session.sessionId ||
+                            isDeleting
+                          }
+                        >
+                          {terminatingSessionId === session.sessionId
+                            ? "終了中..."
+                            : "終了"}
+                        </Button>
+                      ) : (
+                        <span className="text-sm text-muted-foreground">
+                          --
+                        </span>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,327 @@
+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 type { CustomAITool, 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: CustomAITool };
+
+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;
+  hasBlockingDivergence: 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,
+  hasBlockingDivergence,
+  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">AIツール起動</h3>
+          </div>
+          {configError && <Badge variant="warning">設定の取得に失敗</Badge>}
+        </div>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Web UI
+          から直接AIツールを起動できます。設定したカスタムツールも一覧に表示されます。
+        </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">AIツール</label>
+                <Select
+                  value={selectedToolId}
+                  onValueChange={onToolChange}
+                  disabled={isConfigLoading ?? false}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="ツールを選択" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {availableTools.map((tool) => (
+                      <SelectItem key={tool.id} value={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)
+                    があるため、AIツールを起動する前に同期してください。
+                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    CLI の `git fetch --all` と `git pull --ff-only`
+                    と同じ処理を Web UI から実行できます。
+                  </p>
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {hasBlockingDivergence && (
+              <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 ||
+                  hasBlockingDivergence ||
+                  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

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