@akiojin/gwt 4.12.1 → 6.0.0

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

@@ -1,386 +0,0 @@
-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 {
-  ApiCodingAgent,
-  EnvironmentVariable,
-} from "../../../../types/api.js";
-
-export interface CustomCodingAgentFormValue {
-  id: string;
-  displayName: string;
-  icon?: string | null;
-  description?: string | null;
-  executionType: ApiCodingAgent["executionType"];
-  command: string;
-  defaultArgs?: string[] | null;
-  modeArgs: ApiCodingAgent["modeArgs"];
-  permissionSkipArgs?: string[] | null;
-  env?: EnvironmentVariable[] | null;
-}
-
-interface CustomCodingAgentFormProps {
-  initialValue?: ApiCodingAgent;
-  onSubmit: (value: CustomCodingAgentFormValue) => void;
-  onCancel: () => void;
-  isSaving?: boolean;
-}
-
-interface FormErrors {
-  id?: string;
-  displayName?: string;
-  command?: string;
-  env?: string;
-}
-
-export function CustomCodingAgentForm({
-  initialValue,
-  onSubmit,
-  onCancel,
-  isSaving,
-}: CustomCodingAgentFormProps) {
-  const [formState, setFormState] = useState(() =>
-    createInitialState(initialValue),
-  );
-  const [errors, setErrors] = useState<FormErrors>({});
-
-  const title = initialValue ? "Coding Agent を編集" : "新規 Coding Agent";
-
-  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 || "Custom Coding Agent"}
-          </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">Agent 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?: ApiCodingAgent) {
-  if (!initialValue) {
-    return {
-      id: "",
-      displayName: "",
-      icon: "",
-      description: "",
-      executionType: "bunx" as ApiCodingAgent["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;
-}

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

@@ -1,119 +0,0 @@
-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 { ApiCodingAgent } from "../../../../types/api.js";
-
-interface CustomCodingAgentListProps {
-  agents: ApiCodingAgent[];
-  onEdit: (agent: ApiCodingAgent) => void;
-  onDelete: (agent: ApiCodingAgent) => void;
-}
-
-export function CustomCodingAgentList({
-  agents,
-  onEdit,
-  onDelete,
-}: CustomCodingAgentListProps) {
-  if (!agents.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">
-            Custom Coding Agent が登録されていません
-          </h3>
-          <p className="mt-2 text-sm text-muted-foreground">
-            「Coding Agent を追加」から最初のエージェントを登録してください。
-          </p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-      {agents.map((agent) => (
-        <Card key={agent.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: {agent.id}
-                </p>
-                <h3 className="mt-1 flex items-center gap-2 font-semibold">
-                  {agent.icon && <span>{agent.icon}</span>}
-                  <span className="truncate">{agent.displayName}</span>
-                </h3>
-              </div>
-              <Badge variant="outline">
-                {renderExecutionLabel(agent.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">
-              {agent.command}
-            </p>
-
-            {agent.description && (
-              <p className="text-sm text-muted-foreground">
-                {agent.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(agent.modeArgs?.normal)}</dd>
-              </div>
-              <div>
-                <dt className="text-muted-foreground">continue</dt>
-                <dd className="mt-0.5">
-                  {renderArgs(agent.modeArgs?.continue)}
-                </dd>
-              </div>
-              <div>
-                <dt className="text-muted-foreground">resume</dt>
-                <dd className="mt-0.5">{renderArgs(agent.modeArgs?.resume)}</dd>
-              </div>
-            </dl>
-          </CardContent>
-
-          <CardFooter className="flex gap-2 pt-0">
-            <Button variant="secondary" size="sm" onClick={() => onEdit(agent)}>
-              編集
-            </Button>
-            <Button variant="ghost" size="sm" onClick={() => onDelete(agent)}>
-              削除
-            </Button>
-          </CardFooter>
-        </Card>
-      ))}
-    </div>
-  );
-}
-
-function renderExecutionLabel(type: ApiCodingAgent["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,188 +0,0 @@
-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;
-  key: string;
-  value: string;
-  importedFromOs?: boolean;
-  lastUpdated?: string | null;
-}
-
-interface EnvEditorProps {
-  title: string;
-  rows: EnvRow[];
-  onChange: (rows: EnvRow[]) => void;
-  description?: string;
-  allowAdd?: boolean;
-  emptyLabel?: string;
-}
-
-const KEY_PATTERN = /^[A-Z0-9_]+$/;
-
-export function createEnvRow(variable?: Partial<EnvRow>): EnvRow {
-  const row: EnvRow = {
-    id:
-      variable?.id ??
-      `env-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-    key: variable?.key ?? "",
-    value: variable?.value ?? "",
-  };
-
-  if (typeof variable?.importedFromOs === "boolean") {
-    row.importedFromOs = variable.importedFromOs;
-  }
-  if (variable?.lastUpdated) {
-    row.lastUpdated = variable.lastUpdated;
-  }
-
-  return row;
-}
-
-function isInvalidKey(row: EnvRow): boolean {
-  if (!row.key) return true;
-  return !KEY_PATTERN.test(row.key);
-}
-
-export function EnvEditor({
-  title,
-  rows,
-  onChange,
-  description,
-  allowAdd = true,
-  emptyLabel = "環境変数はまだありません",
-}: EnvEditorProps) {
-  const handleFieldChange = (
-    id: string,
-    field: "key" | "value",
-    value: string,
-  ) => {
-    onChange(
-      rows.map((row) =>
-        row.id === id
-          ? {
-              ...row,
-              [field]:
-                field === "key"
-                  ? value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")
-                  : value,
-            }
-          : row,
-      ),
-    );
-  };
-
-  const handleRemove = (id: string) => {
-    onChange(rows.filter((row) => row.id !== id));
-  };
-
-  const handleAdd = () => {
-    onChange([...rows, createEnvRow()]);
-  };
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-start justify-between gap-4">
-        <div>
-          <h3 className="font-semibold">{title}</h3>
-          {description && (
-            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-          )}
-        </div>
-        {allowAdd && (
-          <Button variant="secondary" size="sm" onClick={handleAdd}>
-            変数を追加
-          </Button>
-        )}
-      </div>
-
-      {rows.length === 0 ? (
-        <p className="py-4 text-center text-sm text-muted-foreground">
-          {emptyLabel}
-        </p>
-      ) : (
-        <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)}
-                      >
-                        削除
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      )}
-    </div>
-  );
-}