@akiojin/gwt 4.12.1 → 6.0.0

package/src/web/client/src/pages/ConfigPage.tsx

@@ -1,368 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
-import type {
-  ApiCodingAgent,
-  EnvironmentVariable,
-} from "../../../../types/api.js";
-import { useConfig, useUpdateConfig } from "../hooks/useConfig";
-import { CustomCodingAgentList } from "../components/CustomCodingAgentList";
-import {
-  CustomCodingAgentForm,
-  type CustomCodingAgentFormValue,
-} from "../components/CustomCodingAgentForm";
-import {
-  EnvironmentEditor,
-  type EnvEntry,
-} from "../components/EnvironmentEditor";
-import { PageHeader } from "@/components/common/PageHeader";
-import { Button } from "@/components/ui/button";
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-
-interface BannerState {
-  type: "success" | "error" | "info";
-  message: string;
-}
-
-const ENV_KEY_REGEX = /^[A-Z0-9_]+$/;
-const ENV_KEY_MAX = 100;
-const ENV_VALUE_MAX = 500;
-
-export function ConfigPage() {
-  const { data, isLoading, error } = useConfig();
-  const updateConfig = useUpdateConfig();
-  const [agents, setAgents] = useState<ApiCodingAgent[]>([]);
-  const [editingAgent, setEditingAgent] = useState<ApiCodingAgent | undefined>(
-    undefined,
-  );
-  const [banner, setBanner] = useState<BannerState | null>(null);
-  const [isCreating, setIsCreating] = useState(false);
-  const [envEntries, setEnvEntries] = useState<EnvEntry[]>([]);
-
-  useEffect(() => {
-    if (data?.codingAgents) setAgents(data.codingAgents);
-    if (data) setEnvEntries(entriesFromVariables(data.env));
-  }, [data]);
-
-  const sortedAgents = useMemo(() => {
-    return [...agents].sort((a, b) =>
-      a.displayName.localeCompare(b.displayName, "ja"),
-    );
-  }, [agents]);
-
-  const handleEdit = (agent: ApiCodingAgent) => {
-    setEditingAgent(agent);
-    setIsCreating(false);
-  };
-
-  const handleDelete = (agent: ApiCodingAgent) => {
-    if (!window.confirm(`${agent.displayName} を削除しますか？`)) return;
-    const next = agents.filter((a) => a.id !== agent.id);
-    persistConfig(next, envEntries, `${agent.displayName} を削除しました。`);
-  };
-
-  const handleCreate = () => {
-    setEditingAgent(undefined);
-    setIsCreating(true);
-  };
-
-  const handleFormSubmit = (value: CustomCodingAgentFormValue) => {
-    const now = new Date().toISOString();
-    const existing = agents.find((agent) => agent.id === value.id);
-    const nextAgent: ApiCodingAgent = {
-      id: value.id,
-      displayName: value.displayName,
-      icon: value.icon ?? null,
-      description: value.description ?? null,
-      executionType: value.executionType,
-      command: value.command,
-      defaultArgs: value.defaultArgs ?? null,
-      modeArgs: {
-        normal: value.modeArgs.normal ?? [],
-        continue: value.modeArgs.continue ?? [],
-        resume: value.modeArgs.resume ?? [],
-      },
-      permissionSkipArgs: value.permissionSkipArgs ?? null,
-      env: value.env ?? null,
-      createdAt: existing?.createdAt ?? now,
-      updatedAt: now,
-    };
-
-    const nextList = existing
-      ? agents.map((agent) => (agent.id === nextAgent.id ? nextAgent : agent))
-      : [...agents, nextAgent];
-
-    persistConfig(
-      nextList,
-      envEntries,
-      `${nextAgent.displayName} を保存しました。`,
-    );
-  };
-
-  const persistConfig = (
-    nextAgents: ApiCodingAgent[],
-    nextEnvEntries: EnvEntry[],
-    successMessage: string,
-    options?: { resetForm?: boolean },
-  ) => {
-    let envPayload: EnvironmentVariable[];
-    try {
-      envPayload = buildEnvVariables(nextEnvEntries);
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      setBanner({ type: "error", message });
-      return;
-    }
-
-    const nextVersion = data?.version ?? "1.0.0";
-    updateConfig
-      .mutateAsync({
-        version: nextVersion,
-        codingAgents: nextAgents,
-        env: envPayload,
-      })
-      .then((response) => {
-        setAgents(response.codingAgents);
-        setEnvEntries(entriesFromVariables(response.env));
-        setBanner({ type: "success", message: successMessage });
-        if (options?.resetForm ?? true) {
-          setEditingAgent(undefined);
-          setIsCreating(false);
-        }
-      })
-      .catch((err) => {
-        const message = err instanceof Error ? err.message : String(err);
-        setBanner({ type: "error", message });
-      });
-  };
-
-  const handleEnvEntryChange = (
-    id: string,
-    field: "key" | "value",
-    value: string,
-  ) => {
-    setEnvEntries((prev) =>
-      prev.map((entry) =>
-        entry.id === id
-          ? {
-              ...entry,
-              [field]: field === "key" ? sanitizeEnvKey(value) : value,
-            }
-          : entry,
-      ),
-    );
-  };
-
-  const handleEnvAdd = () =>
-    setEnvEntries((prev) => [...prev, createEnvEntry()]);
-  const handleEnvRemove = (id: string) =>
-    setEnvEntries((prev) => prev.filter((e) => e.id !== id));
-  const handleEnvSave = () =>
-    persistConfig(agents, envEntries, "環境変数を保存しました。", {
-      resetForm: false,
-    });
-  const handleCancel = () => {
-    setEditingAgent(undefined);
-    setIsCreating(false);
-  };
-
-  const activeFormAgent = isCreating ? undefined : editingAgent;
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <div className="min-h-screen bg-background">
-        <PageHeader
-          eyebrow="CONFIGURATION"
-          title="Custom Coding Agent"
-          subtitle="読み込み中..."
-        />
-        <main className="mx-auto max-w-7xl px-6 py-8">
-          <div className="flex items-center justify-center py-20">
-            <p className="text-muted-foreground">設定を取得しています...</p>
-          </div>
-        </main>
-      </div>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <div className="min-h-screen bg-background">
-        <PageHeader eyebrow="CONFIGURATION" title="エラー" />
-        <main className="mx-auto max-w-7xl px-6 py-8">
-          <Alert variant="destructive">
-            <AlertDescription>
-              {error instanceof Error ? error.message : "未知のエラーです"}
-            </AlertDescription>
-          </Alert>
-          <div className="mt-4">
-            <Button variant="ghost" asChild>
-              <Link to="/">← ブランチ一覧に戻る</Link>
-            </Button>
-          </div>
-        </main>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-background">
-      <PageHeader
-        eyebrow="CONFIGURATION"
-        title="Custom Coding Agent"
-        subtitle="tools.json を編集して、独自の Coding Agent を CLI / Web UI 両方から利用できます。"
-      >
-        <div className="mt-4 flex flex-wrap gap-2">
-          <Button variant="ghost" size="sm" asChild>
-            <Link to="/">← ブランチ一覧</Link>
-          </Button>
-          <Button variant="secondary" onClick={handleCreate}>
-            Coding Agent を追加
-          </Button>
-        </div>
-      </PageHeader>
-
-      {/* Banner */}
-      {banner && (
-        <div className="mx-auto max-w-7xl px-6 pt-4">
-          <Alert
-            variant={
-              banner.type === "error"
-                ? "destructive"
-                : banner.type === "success"
-                  ? "success"
-                  : "info"
-            }
-          >
-            <AlertDescription className="flex items-center justify-between">
-              <span>{banner.message}</span>
-              <Button variant="ghost" size="sm" onClick={() => setBanner(null)}>
-                閉じる
-              </Button>
-            </AlertDescription>
-          </Alert>
-        </div>
-      )}
-
-      <main className="mx-auto max-w-7xl space-y-6 px-6 py-8">
-        {/* Environment Variables */}
-        <Card>
-          <CardHeader className="pb-3">
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Environment Variables
-            </p>
-            <h3 className="mt-1 text-lg font-semibold">共有環境変数</h3>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Web UI で起動する Coding Agent
-              はここに定義された環境変数を自動的に引き継ぎます。
-            </p>
-          </CardHeader>
-          <CardContent>
-            <EnvironmentEditor
-              entries={envEntries}
-              onEntryChange={handleEnvEntryChange}
-              onAddEntry={handleEnvAdd}
-              onRemoveEntry={handleEnvRemove}
-              onSave={handleEnvSave}
-              isSaving={updateConfig.isPending}
-            />
-          </CardContent>
-        </Card>
-
-        {/* Coding Agent List */}
-        <Card>
-          <CardHeader className="pb-3">
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              Registered Coding Agents
-            </p>
-            <h3 className="mt-1 text-lg font-semibold">
-              登録済み Coding Agent
-            </h3>
-            <p className="mt-2 text-sm text-muted-foreground">
-              CLI と Web UI は同じ設定を参照します。更新すると ~/.gwt/tools.json
-              に保存されます。
-            </p>
-          </CardHeader>
-          <CardContent>
-            <CustomCodingAgentList
-              agents={sortedAgents}
-              onEdit={handleEdit}
-              onDelete={handleDelete}
-            />
-          </CardContent>
-        </Card>
-
-        {/* Coding Agent Form */}
-        {(isCreating || editingAgent) && (
-          <Card>
-            <CardContent className="pt-6">
-              <CustomCodingAgentForm
-                {...(activeFormAgent ? { initialValue: activeFormAgent } : {})}
-                onSubmit={handleFormSubmit}
-                onCancel={handleCancel}
-                isSaving={updateConfig.isPending}
-              />
-            </CardContent>
-          </Card>
-        )}
-      </main>
-    </div>
-  );
-}
-
-// Helpers
-function sanitizeEnvKey(value: string): string {
-  return value
-    .toUpperCase()
-    .replace(/[^A-Z0-9_]/g, "")
-    .slice(0, ENV_KEY_MAX);
-}
-
-function createEnvEntry(initial?: Partial<EnvEntry>): EnvEntry {
-  return {
-    id: `${initial?.key ?? "env"}-${Math.random().toString(36).slice(2, 8)}${Date.now().toString(36)}`,
-    key: initial?.key ?? "",
-    value: initial?.value ?? "",
-  };
-}
-
-function entriesFromVariables(
-  variables?: EnvironmentVariable[] | null,
-): EnvEntry[] {
-  if (!variables?.length) return [];
-  return [...variables]
-    .sort((a, b) => a.key.localeCompare(b.key, "en"))
-    .map((v) => createEnvEntry({ key: v.key, value: v.value }));
-}
-
-function buildEnvVariables(entries: EnvEntry[]): EnvironmentVariable[] {
-  const result: EnvironmentVariable[] = [];
-  const seen = new Set<string>();
-  const timestamp = new Date().toISOString();
-
-  for (const entry of entries) {
-    const key = entry.key.trim();
-    const value = entry.value;
-    if (!key && !value) continue;
-
-    if (!key) throw new Error("環境変数のキーを入力してください。");
-    if (!ENV_KEY_REGEX.test(key))
-      throw new Error(
-        "環境変数キーは英大文字・数字・アンダースコアのみ使用できます。",
-      );
-    if (key.length > ENV_KEY_MAX)
-      throw new Error(`環境変数キーは最大${ENV_KEY_MAX}文字です。(${key})`);
-    if (!value) throw new Error(`${key} の値を入力してください。`);
-    if (value.length > ENV_VALUE_MAX)
-      throw new Error(`${key} の値は最大${ENV_VALUE_MAX}文字です。`);
-    if (seen.has(key))
-      throw new Error(`環境変数キー "${key}" が重複しています。`);
-    seen.add(key);
-
-    result.push({ key, value, lastUpdated: timestamp });
-  }
-
-  return result;
-}

package/src/web/client/src/router.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { createBrowserRouter } from "react-router-dom";
-import { BranchListPage } from "./pages/BranchListPage";
-import { BranchDetailPage } from "./pages/BranchDetailPage";
-import { ConfigManagementPage } from "./pages/ConfigManagementPage";
-
-/**
- * React Router設定
- *
- * URL構造:
- * - / - ブランチ一覧（ホーム）
- * - /:branchName - 個別ブランチ詳細（例: /feature-webui, /feature%2Fwebui）
- */
-export const router = createBrowserRouter([
-  {
-    path: "/",
-    element: <BranchListPage />,
-  },
-  {
-    path: "/:branchName",
-    element: <BranchDetailPage />,
-  },
-  {
-    path: "/config",
-    element: <ConfigManagementPage />,
-  },
-]);

package/src/web/client/vite.config.ts

@@ -1,28 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
-import path from "node:path";
-
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-  root: path.resolve(__dirname),
-  build: {
-    outDir: path.resolve(__dirname, "../../../dist/client"),
-    emptyOutDir: true,
-  },
-  server: {
-    port: 5173,
-    proxy: {
-      "/api": {
-        target: "http://localhost:3001",
-        changeOrigin: true,
-        ws: true,
-      },
-    },
-  },
-});

package/src/web/server/env/importer.ts

@@ -1,62 +0,0 @@
-import {
-  loadCodingAgentsConfig,
-  saveCodingAgentsConfig,
-} from "../../../config/tools.js";
-import { recordEnvHistory } from "../../../config/env-history.js";
-import type { EnvironmentHistoryEntry } from "../../../types/api.js";
-import { createLogger } from "../../../logging/logger.js";
-
-const logger = createLogger({ category: "env" });
-
-const IMPORTABLE_KEYS = [
-  "OPENAI_API_KEY",
-  "ANTHROPIC_API_KEY",
-  "GITHUB_TOKEN",
-  "GH_TOKEN",
-  "PERSONAL_ACCESS_TOKEN",
-  "HTTP_PROXY",
-  "HTTPS_PROXY",
-];
-
-const importedKeySet = new Set<string>();
-
-export async function importOsEnvIntoSharedConfig(): Promise<string[]> {
-  const config = await loadCodingAgentsConfig();
-  const sharedEnv = { ...(config.env ?? {}) };
-  const importedKeys: string[] = [];
-
-  for (const key of IMPORTABLE_KEYS) {
-    const value = process.env[key];
-    if (!value) continue;
-    if (sharedEnv[key]) continue;
-    sharedEnv[key] = value;
-    importedKeys.push(key);
-    importedKeySet.add(key);
-  }
-
-  if (!importedKeys.length) {
-    logger.debug({ reason: "no new keys" }, "Env import skipped");
-    return [];
-  }
-
-  await saveCodingAgentsConfig({
-    ...config,
-    env: sharedEnv,
-  });
-
-  const timestamp = new Date().toISOString();
-  const historyEntries: EnvironmentHistoryEntry[] = importedKeys.map((key) => ({
-    key,
-    action: "import",
-    source: "os",
-    timestamp,
-  }));
-  await recordEnvHistory(historyEntries);
-
-  logger.info({ importedKeys }, "Environment variables imported");
-  return importedKeys;
-}
-
-export function getImportedEnvKeys(): string[] {
-  return Array.from(importedKeySet);
-}

package/src/web/server/index.ts

@@ -1,143 +0,0 @@
-/**
- * Web UI Server Entry Point
- *
- * Fastifyベースのウェブサーバーを起動し、REST APIとWebSocketを提供します。
- * 仕様: specs/SPEC-d5e56259/contracts/rest-api.yaml
- */
-
-import Fastify from "fastify";
-import fastifyStatic from "@fastify/static";
-import fastifyWebsocket from "@fastify/websocket";
-import { fileURLToPath } from "node:url";
-import { dirname, join } from "node:path";
-import { PTYManager } from "./pty/manager.js";
-import { WebSocketHandler } from "./websocket/handler.js";
-import { registerRoutes } from "./routes/index.js";
-import { importOsEnvIntoSharedConfig } from "./env/importer.js";
-import { createLogger } from "../../logging/logger.js";
-import type { WebFastifyInstance } from "./types.js";
-import { disposeSystemTray, startSystemTray } from "./tray.js";
-import { resolveWebUiPort } from "../../utils/webui.js";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-/**
- * Web UI サーバーのライフサイクル操作ハンドル。
- *
- * `close()` は Web UI サーバーを停止し、関連リソース（PTY/トレイ等）を解放します。
- */
-export interface WebServerHandle {
-  close: () => Promise<void>;
-}
-
-/**
- * `startWebServer` の起動オプション。
- */
-export interface StartWebServerOptions {
-  /**
-   * true の場合、Web UI サーバーが CLI 本体の終了をブロックしないようにします。
-   * （内部で `server.unref()` を呼び、サーバーの存在がプロセス生存を維持しないようにします）
-   */
-  background?: boolean;
-}
-
-/**
- * Web UI サーバーを起動します。
- *
- * @param options - 起動オプション
- * @returns Web UI サーバー停止用のハンドル
- * @throws サーバー起動（listen/初期化）に失敗した場合
- */
-export async function startWebServer(
-  options: StartWebServerOptions = {},
-): Promise<WebServerHandle> {
-  const serverLogger = createLogger({ category: "server" });
-
-  const fastify: WebFastifyInstance = Fastify({
-    loggerInstance: serverLogger,
-  });
-
-  // PTYマネージャーとWebSocketハンドラーを初期化
-  const ptyManager = new PTYManager();
-  const wsHandler = new WebSocketHandler(ptyManager, fastify.log);
-
-  // WebSocketサポートを追加
-  await fastify.register(fastifyWebsocket);
-
-  // WebSocketエンドポイント
-  fastify.register(async (fastify) => {
-    fastify.get(
-      "/api/sessions/:sessionId/terminal",
-      { websocket: true },
-      (connection, request) => {
-        wsHandler.handle(connection, request);
-      },
-    );
-  });
-
-  // REST APIルートを登録
-  await importOsEnvIntoSharedConfig();
-  await registerRoutes(fastify, ptyManager);
-
-  // 静的ファイル配信（Viteビルド成果物）
-  const clientDistPath = join(__dirname, "../../../dist/client");
-  await fastify.register(fastifyStatic, {
-    root: clientDistPath,
-    prefix: "/",
-  });
-
-  // SPAフォールバック: 未知のルートにindex.htmlを返す
-  fastify.setNotFoundHandler(async (request, reply) => {
-    // APIリクエストは404を返す
-    if (request.url.startsWith("/api/")) {
-      return reply.status(404).send({ error: "Not Found", statusCode: 404 });
-    }
-    // それ以外はindex.htmlを返してReact Routerに処理を委譲
-    return reply.sendFile("index.html");
-  });
-
-  // サーバー起動
-  const port = resolveWebUiPort();
-  // Docker環境からホストOSでアクセスできるよう、0.0.0.0でリッスン
-  // IPv4/IPv6両方対応のため、listenOnStart: false も検討可能
-  const host = process.env.HOST || "0.0.0.0";
-
-  await fastify.listen({ port, host });
-  const accessUrl = `http://localhost:${port}`;
-  serverLogger.info({ host, port, accessUrl }, "Web UI server started");
-  await startSystemTray(accessUrl);
-
-  if (options.background) {
-    fastify.server?.unref?.();
-  }
-
-  let closed = false;
-  return {
-    close: async () => {
-      if (closed) return;
-      closed = true;
-
-      try {
-        try {
-          disposeSystemTray();
-        } catch (err) {
-          serverLogger.warn({ err }, "System tray cleanup failed");
-        }
-
-        for (const session of ptyManager.list()) {
-          try {
-            ptyManager.delete(session.sessionId);
-          } catch (err) {
-            serverLogger.warn(
-              { err, sessionId: session.sessionId },
-              "Failed to delete PTY session",
-            );
-          }
-        }
-      } finally {
-        await fastify.close();
-      }
-    },
-  };
-}