@akiojin/gwt 4.12.2 → 5.1.0

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

@@ -1,97 +0,0 @@
-import React from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-
-export interface EnvEntry {
-  id: string;
-  key: string;
-  value: string;
-}
-
-interface EnvironmentEditorProps {
-  entries: EnvEntry[];
-  onEntryChange: (id: string, field: "key" | "value", value: string) => void;
-  onAddEntry: () => void;
-  onRemoveEntry: (id: string) => void;
-  onSave: () => void;
-  isSaving?: boolean;
-}
-
-export function EnvironmentEditor({
-  entries,
-  onEntryChange,
-  onAddEntry,
-  onRemoveEntry,
-  onSave,
-  isSaving,
-}: EnvironmentEditorProps) {
-  const hasEntries = entries.length > 0;
-
-  return (
-    <div className="space-y-4">
-      <p className="text-sm text-muted-foreground">
-        Claude Code / Codex CLI などが参照する共有環境変数を管理します。例:
-        ANTHROPIC_API_KEY, OPENAI_API_KEY, GITHUB_TOKEN
-      </p>
-
-      <div className="space-y-3">
-        {!hasEntries && (
-          <p className="py-4 text-center text-sm text-muted-foreground">
-            環境変数はまだ設定されていません。
-          </p>
-        )}
-
-        {entries.map((entry) => (
-          <div key={entry.id} className="flex items-end gap-3">
-            <div className="flex-1 space-y-1">
-              <label className="text-sm font-medium">キー</label>
-              <Input
-                type="text"
-                value={entry.key}
-                onChange={(event) =>
-                  onEntryChange(entry.id, "key", event.target.value)
-                }
-                placeholder="ANTHROPIC_API_KEY"
-                maxLength={100}
-                disabled={isSaving}
-              />
-            </div>
-
-            <div className="flex-1 space-y-1">
-              <label className="text-sm font-medium">値</label>
-              <Input
-                type="text"
-                value={entry.value}
-                onChange={(event) =>
-                  onEntryChange(entry.id, "value", event.target.value)
-                }
-                placeholder="sk-..."
-                maxLength={500}
-                disabled={isSaving}
-              />
-            </div>
-
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => onRemoveEntry(entry.id)}
-              disabled={isSaving}
-            >
-              削除
-            </Button>
-          </div>
-        ))}
-      </div>
-
-      <div className="flex gap-2 pt-2">
-        <Button variant="secondary" onClick={onAddEntry} disabled={isSaving}>
-          環境変数を追加
-        </Button>
-
-        <Button onClick={onSave} disabled={isSaving}>
-          {isSaving ? "保存中..." : "保存"}
-        </Button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,145 +0,0 @@
-/**
- * Terminal Component
- *
- * xterm.jsを使用したブラウザ端末エミュレータ。
- * WebSocket経由でPTYプロセスと通信します。
- */
-
-import React, { useEffect, useRef } from "react";
-import { Terminal as XTerm } from "xterm";
-import { FitAddon } from "xterm-addon-fit";
-import { PTYWebSocket } from "../lib/websocket";
-import "xterm/css/xterm.css";
-
-export interface TerminalProps {
-  sessionId: string;
-  onExit?: (code: number) => void;
-  onError?: (message: string) => void;
-}
-
-export function Terminal({ sessionId, onExit, onError }: TerminalProps) {
-  const terminalRef = useRef<HTMLDivElement>(null);
-  const xtermRef = useRef<XTerm | null>(null);
-  const fitAddonRef = useRef<FitAddon | null>(null);
-  const wsRef = useRef<PTYWebSocket | null>(null);
-  const onExitRef = useRef(onExit);
-  const onErrorRef = useRef(onError);
-
-  // Keep refs up to date
-  useEffect(() => {
-    onExitRef.current = onExit;
-    onErrorRef.current = onError;
-  }, [onExit, onError]);
-
-  useEffect(() => {
-    if (!terminalRef.current) {
-      return;
-    }
-
-    // xterm.jsのインスタンスを作成
-    const xterm = new XTerm({
-      cursorBlink: true,
-      fontSize: 14,
-      fontFamily: '"Cascadia Code", "SF Mono", Monaco, Consolas, monospace',
-      theme: {
-        background: "#1e1e1e",
-        foreground: "#d4d4d4",
-        cursor: "#aeafad",
-        black: "#000000",
-        red: "#cd3131",
-        green: "#0dbc79",
-        yellow: "#e5e510",
-        blue: "#2472c8",
-        magenta: "#bc3fbc",
-        cyan: "#11a8cd",
-        white: "#e5e5e5",
-        brightBlack: "#666666",
-        brightRed: "#f14c4c",
-        brightGreen: "#23d18b",
-        brightYellow: "#f5f543",
-        brightBlue: "#3b8eea",
-        brightMagenta: "#d670d6",
-        brightCyan: "#29b8db",
-        brightWhite: "#ffffff",
-      },
-    });
-
-    // FitAddonを追加
-    const fitAddon = new FitAddon();
-    xterm.loadAddon(fitAddon);
-
-    // ターミナルをDOMにマウント
-    xterm.open(terminalRef.current);
-    fitAddon.fit();
-
-    xtermRef.current = xterm;
-    fitAddonRef.current = fitAddon;
-
-    // WebSocket接続を確立
-    const ws = new PTYWebSocket(sessionId, {
-      onOutput: (data) => {
-        xterm.write(data);
-      },
-      onExit: (code) => {
-        xterm.write(`\r\n\r\n[Process exited with code ${code}]\r\n`);
-        onExitRef.current?.(code);
-      },
-      onError: (message) => {
-        xterm.write(`\r\n\r\n[Error: ${message}]\r\n`);
-        onErrorRef.current?.(message);
-      },
-      onOpen: () => {
-        xterm.write("Connected to session...\r\n");
-      },
-      onClose: () => {
-        xterm.write("\r\n[Connection closed]\r\n");
-      },
-    });
-
-    ws.connect();
-    wsRef.current = ws;
-
-    // ユーザー入力をWebSocketに送信
-    xterm.onData((data) => {
-      ws.sendInput(data);
-    });
-
-    // ウィンドウリサイズ時にターミナルサイズを調整
-    const handleResize = () => {
-      fitAddon.fit();
-      if (ws.isConnected()) {
-        ws.sendResize(xterm.cols, xterm.rows);
-      }
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    let resizeObserver: ResizeObserver | null = null;
-    if (typeof ResizeObserver !== "undefined") {
-      resizeObserver = new ResizeObserver(() => {
-        handleResize();
-      });
-      resizeObserver.observe(terminalRef.current);
-    }
-
-    // クリーンアップ
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      resizeObserver?.disconnect();
-      ws.disconnect();
-      xterm.dispose();
-    };
-  }, [sessionId]);
-
-  return (
-    <div
-      ref={terminalRef}
-      style={{
-        width: "100%",
-        height: "100%",
-        padding: "8px",
-        backgroundColor: "#1e1e1e",
-      }}
-    />
-  );
-}

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

@@ -1,193 +0,0 @@
-import React from "react";
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import type { Branch, LastToolUsage } from "../../../../../types/api.js";
-import {
-  getAgentTailwindClass,
-  getAgentBgTailwindClass,
-} from "@/lib/coding-agent-colors";
-
-interface BranchInfoCardsProps {
-  branch: Branch;
-  formattedCommitDate: string;
-  latestToolUsage: LastToolUsage | null;
-}
-
-function mapToolLabel(toolId: string, toolLabel?: string | null): string {
-  if (toolId === "claude-code") return "Claude";
-  if (toolId === "codex-cli") return "Codex";
-  if (toolId === "gemini-cli") return "Gemini";
-  if (toolLabel) return toolLabel;
-  return "Custom";
-}
-
-function renderToolUsage(usage: LastToolUsage): string {
-  const modeLabel =
-    usage.mode === "normal"
-      ? "New"
-      : usage.mode === "continue"
-        ? "Continue"
-        : usage.mode === "resume"
-          ? "Resume"
-          : null;
-  const toolText = mapToolLabel(usage.toolId, usage.toolLabel);
-  return [toolText, modeLabel, usage.model].filter(Boolean).join(" | ");
-}
-
-function formatUsageTimestamp(value: number): string {
-  try {
-    return new Intl.DateTimeFormat("ja-JP", {
-      month: "short",
-      day: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-    }).format(new Date(value));
-  } catch {
-    return "--";
-  }
-}
-
-export function BranchInfoCards({
-  branch,
-  formattedCommitDate,
-  latestToolUsage,
-}: BranchInfoCardsProps) {
-  return (
-    <div className="grid gap-4 lg:grid-cols-2">
-      {/* Branch Insights */}
-      <Card>
-        <CardHeader className="pb-2">
-          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            Branch Insights
-          </p>
-          <h3 className="text-lg font-semibold">ブランチインサイト</h3>
-        </CardHeader>
-        <CardContent>
-          <dl className="grid gap-3 text-sm">
-            <div className="flex justify-between border-b border-border/50 pb-2">
-              <dt className="text-muted-foreground">コミット</dt>
-              <dd className="font-mono text-xs">{branch.commitHash}</dd>
-            </div>
-            <div className="flex justify-between border-b border-border/50 pb-2">
-              <dt className="text-muted-foreground">Author</dt>
-              <dd>{branch.author ?? "N/A"}</dd>
-            </div>
-            <div className="flex justify-between border-b border-border/50 pb-2">
-              <dt className="text-muted-foreground">更新日</dt>
-              <dd>{formattedCommitDate}</dd>
-            </div>
-            <div className="flex justify-between">
-              <dt className="text-muted-foreground">Worktree</dt>
-              <dd
-                className="max-w-[200px] truncate text-right"
-                title={branch.worktreePath ?? undefined}
-              >
-                {branch.worktreePath ?? "未作成"}
-              </dd>
-            </div>
-          </dl>
-        </CardContent>
-      </Card>
-
-      {/* Commit Message */}
-      <Card>
-        <CardHeader className="pb-2">
-          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            Latest Commit
-          </p>
-          <h3 className="text-lg font-semibold">コミット情報</h3>
-        </CardHeader>
-        <CardContent>
-          <p className="text-sm text-muted-foreground">
-            {branch.commitMessage ?? "コミットメッセージがありません。"}
-          </p>
-        </CardContent>
-      </Card>
-
-      {/* Divergence Status */}
-      {branch.divergence && (
-        <Card>
-          <CardHeader className="pb-2">
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Divergence
-            </p>
-            <h3 className="text-lg font-semibold">差分状況</h3>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap gap-2">
-              <Badge variant="outline">↑ Ahead {branch.divergence.ahead}</Badge>
-              <Badge variant="outline">
-                ↓ Behind {branch.divergence.behind}
-              </Badge>
-              <Badge
-                variant={branch.divergence.upToDate ? "success" : "warning"}
-              >
-                {branch.divergence.upToDate ? "最新" : "更新あり"}
-              </Badge>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Worktree Info */}
-      <Card>
-        <CardHeader className="pb-2">
-          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-            Worktree
-          </p>
-          <h3 className="text-lg font-semibold">Worktree情報</h3>
-        </CardHeader>
-        <CardContent className="space-y-2 text-sm text-muted-foreground">
-          <p>
-            パス:{" "}
-            <strong className="text-foreground">
-              {branch.worktreePath ?? "未作成"}
-            </strong>
-          </p>
-          <ul className="list-inside list-disc space-y-1 text-xs">
-            <li>AIツールの起動にはクリーンなワークツリーであることを推奨</li>
-            <li>Worktree再作成で既存のローカル変更が失われる可能性あり</li>
-          </ul>
-        </CardContent>
-      </Card>
-
-      {/* Last Tool Usage */}
-      {latestToolUsage && (
-        <Card className="lg:col-span-2">
-          <CardHeader className="pb-2">
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Last Activity
-            </p>
-            <h3 className="text-lg font-semibold">最終ツール使用</h3>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-wrap items-center gap-2 text-sm">
-              <Badge
-                variant="outline"
-                className={`${getAgentTailwindClass(latestToolUsage.toolId)} ${getAgentBgTailwindClass(latestToolUsage.toolId)}`}
-              >
-                {renderToolUsage(latestToolUsage)}
-              </Badge>
-              <span className="text-muted-foreground">
-                {formatUsageTimestamp(latestToolUsage.timestamp)}
-              </span>
-              {latestToolUsage.worktreePath && (
-                <span className="text-xs text-muted-foreground">
-                  @ {latestToolUsage.worktreePath}
-                </span>
-              )}
-              {latestToolUsage.sessionId && (
-                <span className="text-xs text-muted-foreground">
-                  Session ID:{" "}
-                  <code className="rounded bg-muted px-1.5 py-0.5 font-mono">
-                    {latestToolUsage.sessionId}
-                  </code>
-                </span>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-      )}
-    </div>
-  );
-}

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

@@ -1,187 +0,0 @@
-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";
-import {
-  getAgentTailwindClass,
-  normalizeAgentToToolId,
-} from "@/lib/coding-agent-colors";
-
-interface SessionInfo {
-  sessionId: string;
-  worktreePath: string;
-  agentType: string;
-  agentName?: 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 agentLabel(agentType: string, agentName?: string | null): string {
-  if (agentType === "custom") return agentName ?? "Custom";
-  if (agentType === "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 に紐づいた Coding Agent セッション履歴です。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 ${getAgentTailwindClass(normalizeAgentToToolId(session.agentType))}`}
-                    >
-                      {agentLabel(session.agentType, session.agentName)}
-                    </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>
-  );
-}