@akiojin/gwt 2.13.0 → 3.0.0

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

@@ -1,5 +1,8 @@
 import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 import type { Branch } from "../../../../types/api.js";
 
 const UNKNOWN_BASE = "__unknown__";
@@ -55,7 +58,6 @@ export function BranchGraph({ branches }: BranchGraphProps) {
       const base = branch.baseBranch ?? UNKNOWN_BASE;
 
       if (!branch.baseBranch && referencedBases.has(branch.name)) {
-        // ベースとして参照されている場合は、グラフ上で基点ノードとしてのみ表示
         return;
       }
 
@@ -75,71 +77,83 @@ export function BranchGraph({ branches }: BranchGraphProps) {
     });
 
     return Array.from(laneMap.values()).sort((a, b) => {
-      if (a.id === UNKNOWN_BASE) {
-        return 1;
-      }
-      if (b.id === UNKNOWN_BASE) {
-        return -1;
-      }
+      if (a.id === UNKNOWN_BASE) return 1;
+      if (b.id === UNKNOWN_BASE) return -1;
       return a.baseLabel.localeCompare(b.baseLabel, "ja");
     });
   }, [branches, branchMap, referencedBases]);
 
   if (!lanes.length) {
     return (
-      <section className="branch-graph-panel">
-        <div className="branch-graph-panel__empty">
-          <p>グラフ表示できるブランチがありません。</p>
-          <p>fetch済みのブランチやWorktreeを追加すると関係図が表示されます。</p>
-        </div>
-      </section>
+      <Card className="border-dashed">
+        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
+          <p className="text-muted-foreground">
+            グラフ表示できるブランチがありません。
+          </p>
+          <p className="text-sm text-muted-foreground">
+            fetch済みのブランチやWorktreeを追加すると関係図が表示されます。
+          </p>
+        </CardContent>
+      </Card>
     );
   }
 
   return (
-    <section className="branch-graph-panel">
-      <header className="branch-graph-panel__header">
-        <div>
-          <p className="branch-graph-panel__eyebrow">BRANCH GRAPH</p>
-          <h2>ベースブランチの関係をグラフィカルに把握</h2>
-          <p>
-            baseRef、Git
-            upstream、merge-baseヒューリスティクスを用いて推定したベースブランチ単位で
-            派生ノードをレーン表示します。
-          </p>
+    <Card>
+      <CardHeader className="pb-4">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              BRANCH GRAPH
+            </p>
+            <h2 className="mt-1 text-lg font-semibold">
+              ベースブランチの関係をグラフィカルに把握
+            </h2>
+            <p className="mt-1 text-sm text-muted-foreground">
+              baseRef、Git
+              upstream、merge-baseヒューリスティクスを用いて推定したベースブランチ単位で派生ノードをレーン表示します。
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline">Base</Badge>
+            <Badge variant="local">Local</Badge>
+            <Badge variant="remote">Remote</Badge>
+            <Badge variant="success">Worktree</Badge>
+          </div>
         </div>
-        <div className="branch-graph-panel__legend">
-          <span className="graph-chip graph-chip--base">Base</span>
-          <span className="graph-chip graph-chip--local">Local</span>
-          <span className="graph-chip graph-chip--remote">Remote</span>
-          <span className="graph-chip graph-chip--worktree">Worktree</span>
-        </div>
-      </header>
+      </CardHeader>
 
-      <div className="branch-graph">
+      <CardContent className="space-y-4">
         {lanes.map((lane) => (
-          <article className="branch-graph__lane" key={lane.id}>
-            <div className="branch-graph__lane-heading">
-              <p className="branch-graph__lane-label">
-                {lane.baseLabel}
+          <article key={lane.id} className="rounded-lg border bg-muted/30 p-4">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className="font-semibold">{lane.baseLabel}</span>
                 {lane.baseNode && (
-                  <span className="branch-graph__lane-meta">
+                  <Badge
+                    variant={
+                      lane.baseNode.type === "local" ? "local" : "remote"
+                    }
+                    className="text-xs"
+                  >
                     {lane.baseNode.type === "local" ? "LOCAL" : "REMOTE"}
-                  </span>
+                  </Badge>
                 )}
                 {lane.isSyntheticBase && (
-                  <span className="branch-graph__lane-meta lane-meta--muted">
+                  <Badge
+                    variant="outline"
+                    className="text-xs text-muted-foreground"
+                  >
                     推定のみ
-                  </span>
+                  </Badge>
                 )}
-              </p>
-              <span className="branch-graph__lane-count">
-                {lane.nodes.length} branch
-                {lane.nodes.length > 1 ? "es" : ""}
+              </div>
+              <span className="text-sm text-muted-foreground">
+                {lane.nodes.length} branch{lane.nodes.length > 1 ? "es" : ""}
               </span>
             </div>
 
-            <div className="branch-graph__track">
+            <div className="flex flex-wrap gap-2">
               {renderBaseNode(lane)}
               {lane.nodes.map((branch) => (
                 <BranchNode key={branch.name} branch={branch} />
@@ -147,25 +161,30 @@ export function BranchGraph({ branches }: BranchGraphProps) {
             </div>
           </article>
         ))}
-      </div>
-    </section>
+      </CardContent>
+    </Card>
   );
 }
 
 function renderBaseNode(lane: Lane) {
   const label =
     lane.baseLabel === "ベース不明" ? "Unknown base" : lane.baseLabel;
+
   const content = (
     <div
-      className={`branch-graph__node branch-graph__node--base ${
-        lane.baseNode ? `branch-graph__node--${lane.baseNode.type}` : ""
-      }`}
+      className={cn(
+        "group relative rounded-md border bg-card px-3 py-2 transition-colors hover:border-muted-foreground/50",
+        lane.baseNode?.type === "local" && "border-l-2 border-l-local",
+        lane.baseNode?.type === "remote" && "border-l-2 border-l-remote",
+      )}
     >
-      <span className="branch-graph__node-label">{label}</span>
-      <span className="branch-graph__node-meta">BASE</span>
-      <div className="branch-graph__tooltip">
-        <p>{label}</p>
-        <p>
+      <span className="block truncate text-sm font-medium">{label}</span>
+      <span className="text-xs text-muted-foreground">BASE</span>
+
+      {/* Tooltip */}
+      <div className="invisible absolute bottom-full left-0 z-10 mb-2 w-48 rounded-md border bg-popover p-2 text-xs shadow-md group-hover:visible">
+        <p className="font-medium">{label}</p>
+        <p className="text-muted-foreground">
           {lane.baseNode
             ? `type: ${lane.baseNode.type}`
             : "推定されたベースブランチ"}
@@ -179,7 +198,7 @@ function renderBaseNode(lane: Lane) {
       <Link
         key={`base-${lane.id}`}
         to={`/${encodeURIComponent(lane.baseNode.name)}`}
-        className="branch-graph__node-link"
+        className="block"
         aria-label={`ベースブランチ ${lane.baseNode.name} を開く`}
       >
         {content}
@@ -187,35 +206,36 @@ function renderBaseNode(lane: Lane) {
     );
   }
 
-  return (
-    <div key={`base-${lane.id}`} className="branch-graph__node-link">
-      {content}
-    </div>
-  );
+  return <div key={`base-${lane.id}`}>{content}</div>;
 }
 
 function BranchNode({ branch }: { branch: Branch }) {
   const node = (
     <div
-      className={`branch-graph__node branch-graph__node--${branch.type} ${
-        branch.mergeStatus === "merged"
-          ? "branch-graph__node--merged"
-          : branch.mergeStatus === "unmerged"
-            ? "branch-graph__node--active"
-            : ""
-      }`}
+      className={cn(
+        "group relative rounded-md border bg-card px-3 py-2 transition-colors hover:border-muted-foreground/50",
+        branch.type === "local" && "border-l-2 border-l-local",
+        branch.type === "remote" && "border-l-2 border-l-remote",
+        branch.mergeStatus === "merged" && "opacity-60",
+      )}
     >
-      <span className="branch-graph__node-label">
+      <span className="block truncate text-sm font-medium">
         {formatBranchLabel(branch)}
       </span>
-      <span className="branch-graph__node-meta">
+      <span className="text-xs text-muted-foreground">
         {branch.worktreePath ? "Worktree" : "No Worktree"}
       </span>
-      <div className="branch-graph__tooltip">
-        <p>{branch.name}</p>
-        <p>base: {branch.baseBranch ?? "unknown"}</p>
-        <p>{getDivergenceLabel(branch)}</p>
-        <p>{branch.worktreePath ?? "Worktree未作成"}</p>
+
+      {/* Tooltip */}
+      <div className="invisible absolute bottom-full left-0 z-10 mb-2 w-56 rounded-md border bg-popover p-2 text-xs shadow-md group-hover:visible">
+        <p className="font-medium">{branch.name}</p>
+        <p className="text-muted-foreground">
+          base: {branch.baseBranch ?? "unknown"}
+        </p>
+        <p className="text-muted-foreground">{getDivergenceLabel(branch)}</p>
+        <p className="text-muted-foreground">
+          {branch.worktreePath ?? "Worktree未作成"}
+        </p>
       </div>
     </div>
   );
@@ -223,7 +243,7 @@ function BranchNode({ branch }: { branch: Branch }) {
   return (
     <Link
       to={`/${encodeURIComponent(branch.name)}`}
-      className="branch-graph__node-link"
+      className="block"
       aria-label={`${branch.name} の詳細を開く`}
     >
       {node}

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

@@ -0,0 +1,386 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type {
+  CustomAITool,
+  EnvironmentVariable,
+} from "../../../../types/api.js";
+
+export interface CustomToolFormValue {
+  id: string;
+  displayName: string;
+  icon?: string | null;
+  description?: string | null;
+  executionType: CustomAITool["executionType"];
+  command: string;
+  defaultArgs?: string[] | null;
+  modeArgs: CustomAITool["modeArgs"];
+  permissionSkipArgs?: string[] | null;
+  env?: EnvironmentVariable[] | null;
+}
+
+interface CustomToolFormProps {
+  initialValue?: CustomAITool;
+  onSubmit: (value: CustomToolFormValue) => void;
+  onCancel: () => void;
+  isSaving?: boolean;
+}
+
+interface FormErrors {
+  id?: string;
+  displayName?: string;
+  command?: string;
+  env?: string;
+}
+
+export function CustomToolForm({
+  initialValue,
+  onSubmit,
+  onCancel,
+  isSaving,
+}: CustomToolFormProps) {
+  const [formState, setFormState] = useState(() =>
+    createInitialState(initialValue),
+  );
+  const [errors, setErrors] = useState<FormErrors>({});
+
+  const title = initialValue ? "ツールを編集" : "新規カスタムツール";
+
+  const handleChange =
+    (field: keyof typeof formState) =>
+    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setFormState((prev) => ({ ...prev, [field]: event.target.value }));
+    };
+
+  const handleSelectChange =
+    (field: keyof typeof formState) => (value: string) => {
+      setFormState((prev) => ({ ...prev, [field]: value }));
+    };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    const nextErrors: FormErrors = {};
+
+    if (!formState.id.trim()) {
+      nextErrors.id = "IDは必須です";
+    }
+    if (!formState.displayName.trim()) {
+      nextErrors.displayName = "表示名は必須です";
+    }
+    if (!formState.command.trim()) {
+      nextErrors.command = "コマンド/パッケージ名は必須です";
+    }
+
+    const envResult = parseEnv(formState.env);
+    let parsedEnv: EnvironmentVariable[] | null = null;
+    if (envResult instanceof Error) {
+      nextErrors.env = envResult.message;
+    } else {
+      parsedEnv = envResult;
+    }
+
+    if (Object.keys(nextErrors).length) {
+      setErrors(nextErrors);
+      return;
+    }
+
+    setErrors({});
+    onSubmit({
+      id: formState.id.trim(),
+      displayName: formState.displayName.trim(),
+      icon: formState.icon?.trim() ? formState.icon.trim() : null,
+      description: formState.description?.trim()
+        ? formState.description.trim()
+        : null,
+      executionType: formState.executionType,
+      command: formState.command.trim(),
+      defaultArgs: parseList(formState.defaultArgs),
+      modeArgs: {
+        normal: parseList(formState.modeNormal) ?? [],
+        continue: parseList(formState.modeContinue) ?? [],
+        resume: parseList(formState.modeResume) ?? [],
+      },
+      permissionSkipArgs: parseList(formState.permissionSkipArgs),
+      env: parsedEnv,
+    });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+            {title}
+          </p>
+          <h3 className="mt-1 text-lg font-semibold">
+            {formState.displayName || "カスタムAIツール"}
+          </h3>
+        </div>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={onCancel}
+            disabled={isSaving}
+          >
+            キャンセル
+          </Button>
+          <Button type="submit" disabled={isSaving}>
+            {isSaving ? "保存中..." : "保存"}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-2">
+          <label className="text-sm font-medium">ツールID *</label>
+          <Input
+            type="text"
+            value={formState.id}
+            onChange={handleChange("id")}
+            disabled={Boolean(initialValue)}
+          />
+          {errors.id && <p className="text-xs text-destructive">{errors.id}</p>}
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium">表示名 *</label>
+          <Input
+            type="text"
+            value={formState.displayName}
+            onChange={handleChange("displayName")}
+          />
+          {errors.displayName && (
+            <p className="text-xs text-destructive">{errors.displayName}</p>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium">アイコン (任意)</label>
+          <Input
+            type="text"
+            value={formState.icon}
+            onChange={handleChange("icon")}
+            maxLength={2}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium">説明 (任意)</label>
+          <Input
+            type="text"
+            value={formState.description}
+            onChange={handleChange("description")}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium">実行タイプ *</label>
+          <Select
+            value={formState.executionType}
+            onValueChange={handleSelectChange("executionType")}
+            disabled={Boolean(initialValue)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="path">path (絶対パス)</SelectItem>
+              <SelectItem value="bunx">bunx (パッケージ)</SelectItem>
+              <SelectItem value="command">command (PATH)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            {formState.executionType === "bunx" ? "パッケージ名" : "コマンド"} *
+          </label>
+          <Input
+            type="text"
+            value={formState.command}
+            onChange={handleChange("command")}
+          />
+          {errors.command && (
+            <p className="text-xs text-destructive">{errors.command}</p>
+          )}
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            defaultArgs (改行区切り)
+          </label>
+          <textarea
+            value={formState.defaultArgs}
+            onChange={handleChange("defaultArgs")}
+            rows={2}
+            className="flex w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label className="text-sm font-medium">
+            permissionSkipArgs (改行区切り)
+          </label>
+          <textarea
+            value={formState.permissionSkipArgs}
+            onChange={handleChange("permissionSkipArgs")}
+            rows={2}
+            className="flex w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <div className="space-y-2">
+          <label className="text-sm font-medium">normalモード引数</label>
+          <textarea
+            value={formState.modeNormal}
+            onChange={handleChange("modeNormal")}
+            rows={3}
+            className="flex w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">continueモード引数</label>
+          <textarea
+            value={formState.modeContinue}
+            onChange={handleChange("modeContinue")}
+            rows={3}
+            className="flex w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">resumeモード引数</label>
+          <textarea
+            value={formState.modeResume}
+            onChange={handleChange("modeResume")}
+            rows={3}
+            className="flex w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <label className="text-sm font-medium">
+          環境変数 (key=value を改行で記述)
+        </label>
+        <textarea
+          value={formState.env}
+          onChange={handleChange("env")}
+          rows={3}
+          className="flex w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+        />
+        {errors.env && <p className="text-xs text-destructive">{errors.env}</p>}
+      </div>
+    </form>
+  );
+}
+
+function createInitialState(initialValue?: CustomAITool) {
+  if (!initialValue) {
+    return {
+      id: "",
+      displayName: "",
+      icon: "",
+      description: "",
+      executionType: "bunx" as CustomAITool["executionType"],
+      command: "",
+      defaultArgs: "",
+      modeNormal: "",
+      modeContinue: "",
+      modeResume: "",
+      permissionSkipArgs: "",
+      env: "",
+    };
+  }
+
+  return {
+    id: initialValue.id,
+    displayName: initialValue.displayName,
+    icon: initialValue.icon ?? "",
+    description: initialValue.description ?? "",
+    executionType: initialValue.executionType,
+    command: initialValue.command,
+    defaultArgs: joinList(initialValue.defaultArgs),
+    modeNormal: joinList(initialValue.modeArgs?.normal),
+    modeContinue: joinList(initialValue.modeArgs?.continue),
+    modeResume: joinList(initialValue.modeArgs?.resume),
+    permissionSkipArgs: joinList(initialValue.permissionSkipArgs),
+    env: stringifyEnv(initialValue.env),
+  };
+}
+
+function joinList(values?: string[] | null): string {
+  if (!values || values.length === 0) {
+    return "";
+  }
+  return values.join("\n");
+}
+
+function parseList(value: string): string[] | null {
+  if (!value.trim()) {
+    return null;
+  }
+  const values = value
+    .split(/\n|,/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+  return values.length ? values : null;
+}
+
+function stringifyEnv(env?: EnvironmentVariable[] | null): string {
+  if (!env || env.length === 0) {
+    return "";
+  }
+  return env
+    .filter((variable) => variable.key)
+    .map((variable) => `${variable.key}=${variable.value}`)
+    .join("\n");
+}
+
+function parseEnv(value: string): EnvironmentVariable[] | null | Error {
+  if (!value.trim()) {
+    return null;
+  }
+
+  const now = new Date().toISOString();
+  const result: EnvironmentVariable[] = [];
+  const seen = new Set<string>();
+  const lines = value
+    .split(/\n/)
+    .map((line) => line.trim())
+    .filter(Boolean);
+
+  for (const line of lines) {
+    const [rawKey, ...rest] = line.split("=");
+    const key = (rawKey ?? "").trim();
+    if (!key || rest.length === 0) {
+      return new Error("環境変数は key=value 形式で入力してください");
+    }
+    const val = rest.join("=").trim();
+    if (!val) {
+      return new Error(`${key} の値を入力してください`);
+    }
+    if (seen.has(key)) {
+      return new Error(`環境変数 ${key} が重複しています`);
+    }
+    seen.add(key);
+    result.push({
+      key,
+      value: val,
+      lastUpdated: now,
+    });
+  }
+
+  return result;
+}