@akiojin/gwt 2.12.1 → 2.14.0

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

@@ -0,0 +1,119 @@
+import React from "react";
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import type { CustomAITool } from "../../../../types/api.js";
+
+interface CustomToolListProps {
+  tools: CustomAITool[];
+  onEdit: (tool: CustomAITool) => void;
+  onDelete: (tool: CustomAITool) => void;
+}
+
+export function CustomToolList({
+  tools,
+  onEdit,
+  onDelete,
+}: CustomToolListProps) {
+  if (!tools.length) {
+    return (
+      <Card className="border-dashed">
+        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+          <h3 className="text-lg font-semibold">
+            カスタムツールが登録されていません
+          </h3>
+          <p className="mt-2 text-sm text-muted-foreground">
+            「カスタムツールを追加」から最初のツールを登録してください。
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {tools.map((tool) => (
+        <Card key={tool.id} className="flex flex-col">
+          <CardHeader className="pb-3">
+            <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">
+                  ID: {tool.id}
+                </p>
+                <h3 className="mt-1 flex items-center gap-2 font-semibold">
+                  {tool.icon && <span>{tool.icon}</span>}
+                  <span className="truncate">{tool.displayName}</span>
+                </h3>
+              </div>
+              <Badge variant="outline">
+                {renderExecutionLabel(tool.executionType)}
+              </Badge>
+            </div>
+          </CardHeader>
+
+          <CardContent className="flex-1 space-y-3 pb-3">
+            <p className="rounded bg-muted px-2 py-1 font-mono text-sm">
+              {tool.command}
+            </p>
+
+            {tool.description && (
+              <p className="text-sm text-muted-foreground">
+                {tool.description}
+              </p>
+            )}
+
+            <dl className="grid grid-cols-3 gap-2 text-xs">
+              <div>
+                <dt className="text-muted-foreground">normal</dt>
+                <dd className="mt-0.5">{renderArgs(tool.modeArgs?.normal)}</dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">continue</dt>
+                <dd className="mt-0.5">
+                  {renderArgs(tool.modeArgs?.continue)}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">resume</dt>
+                <dd className="mt-0.5">{renderArgs(tool.modeArgs?.resume)}</dd>
+              </div>
+            </dl>
+          </CardContent>
+
+          <CardFooter className="flex gap-2 pt-0">
+            <Button variant="secondary" size="sm" onClick={() => onEdit(tool)}>
+              編集
+            </Button>
+            <Button variant="ghost" size="sm" onClick={() => onDelete(tool)}>
+              削除
+            </Button>
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function renderExecutionLabel(type: CustomAITool["executionType"]) {
+  switch (type) {
+    case "path":
+      return "実行ファイル";
+    case "bunx":
+      return "bunx";
+    case "command":
+    default:
+      return "コマンド";
+  }
+}
+
+function renderArgs(args?: string[] | null) {
+  if (!args || args.length === 0) {
+    return <span className="text-muted-foreground/50">未設定</span>;
+  }
+  return args.join(" ");
+}

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

@@ -1,4 +1,16 @@
 import React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
 
 export interface EnvRow {
   id: string;
@@ -80,98 +92,96 @@ export function EnvEditor({
   };
 
   return (
-    <div className="env-editor">
-      <header className="env-editor__header">
+    <div className="space-y-4">
+      <div className="flex items-start justify-between gap-4">
         <div>
-          <h3>{title}</h3>
+          <h3 className="font-semibold">{title}</h3>
           {description && (
-            <p className="env-editor__description">{description}</p>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
           )}
         </div>
         {allowAdd && (
-          <button
-            type="button"
-            className="button button--secondary"
-            onClick={handleAdd}
-          >
+          <Button variant="secondary" size="sm" onClick={handleAdd}>
             変数を追加
-          </button>
+          </Button>
         )}
-      </header>
+      </div>
 
       {rows.length === 0 ? (
-        <p className="env-editor__empty">{emptyLabel}</p>
+        <p className="py-4 text-center text-sm text-muted-foreground">
+          {emptyLabel}
+        </p>
       ) : (
-        <table className="env-editor__table">
-          <thead>
-            <tr>
-              <th>キー</th>
-              <th>値</th>
-              <th style={{ width: "140px" }}>操作</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row) => {
-              const keyInvalid = isInvalidKey(row);
-              return (
-                <tr
-                  key={row.id}
-                  className={
-                    keyInvalid ? "env-editor__row--invalid" : undefined
-                  }
-                >
-                  <td>
-                    <input
-                      type="text"
-                      value={row.key}
-                      onChange={(event) =>
-                        handleFieldChange(row.id, "key", event.target.value)
-                      }
-                      placeholder="EXAMPLE_KEY"
-                    />
-                    {row.importedFromOs && (
-                      <span
-                        className="pill pill--info"
-                        style={{ marginLeft: "0.5rem" }}
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>キー</TableHead>
+                <TableHead>値</TableHead>
+                <TableHead className="w-24 text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.map((row) => {
+                const keyInvalid = isInvalidKey(row);
+                return (
+                  <TableRow
+                    key={row.id}
+                    className={cn(keyInvalid && "bg-destructive/10")}
+                  >
+                    <TableCell className="space-y-1">
+                      <Input
+                        type="text"
+                        value={row.key}
+                        onChange={(event) =>
+                          handleFieldChange(row.id, "key", event.target.value)
+                        }
+                        placeholder="EXAMPLE_KEY"
+                        className={cn(keyInvalid && "border-destructive")}
+                      />
+                      <div className="flex flex-wrap items-center gap-2">
+                        {row.importedFromOs && (
+                          <Badge variant="outline" className="text-xs">
+                            OSから取り込み
+                          </Badge>
+                        )}
+                        {row.lastUpdated && (
+                          <span className="text-xs text-muted-foreground">
+                            更新: {new Date(row.lastUpdated).toLocaleString()}
+                          </span>
+                        )}
+                      </div>
+                      {keyInvalid && (
+                        <p className="text-xs text-destructive">
+                          A-Z,0-9,_ のみ使用できます
+                        </p>
+                      )}
+                    </TableCell>
+                    <TableCell>
+                      <Input
+                        type="text"
+                        value={row.value}
+                        onChange={(event) =>
+                          handleFieldChange(row.id, "value", event.target.value)
+                        }
+                        placeholder="値"
+                      />
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemove(row.id)}
                       >
-                        OSから取り込み
-                      </span>
-                    )}
-                    {row.lastUpdated && (
-                      <span className="env-editor__meta">
-                        更新: {new Date(row.lastUpdated).toLocaleString()}
-                      </span>
-                    )}
-                    {keyInvalid && (
-                      <p className="env-editor__error">
-                        A-Z,0-9,_ のみ使用できます
-                      </p>
-                    )}
-                  </td>
-                  <td>
-                    <input
-                      type="text"
-                      value={row.value}
-                      onChange={(event) =>
-                        handleFieldChange(row.id, "value", event.target.value)
-                      }
-                      placeholder="値"
-                    />
-                  </td>
-                  <td>
-                    <button
-                      type="button"
-                      className="button button--ghost"
-                      onClick={() => handleRemove(row.id)}
-                    >
-                      削除
-                    </button>
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
+                        削除
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </div>
       )}
     </div>
   );

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

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

@@ -22,6 +22,14 @@ export function Terminal({ sessionId, onExit, onError }: TerminalProps) {
   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) {
@@ -74,11 +82,11 @@ export function Terminal({ sessionId, onExit, onError }: TerminalProps) {
       },
       onExit: (code) => {
         xterm.write(`\r\n\r\n[Process exited with code ${code}]\r\n`);
-        onExit?.(code);
+        onExitRef.current?.(code);
       },
       onError: (message) => {
         xterm.write(`\r\n\r\n[Error: ${message}]\r\n`);
-        onError?.(message);
+        onErrorRef.current?.(message);
       },
       onOpen: () => {
         xterm.write("Connected to session...\r\n");
@@ -121,7 +129,7 @@ export function Terminal({ sessionId, onExit, onError }: TerminalProps) {
       ws.disconnect();
       xterm.dispose();
     };
-  }, [sessionId, onExit, onError]);
+  }, [sessionId]);
 
   return (
     <div

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

@@ -0,0 +1,179 @@
+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";
+
+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 (toolId === "qwen-cli") return "Qwen";
+  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">
+                {renderToolUsage(latestToolUsage)}
+              </Badge>
+              <span className="text-muted-foreground">
+                {formatUsageTimestamp(latestToolUsage.timestamp)}
+              </span>
+              {latestToolUsage.worktreePath && (
+                <span className="text-xs text-muted-foreground">
+                  @ {latestToolUsage.worktreePath}
+                </span>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}