@akiojin/gwt 2.0.0

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

@@ -0,0 +1,264 @@
+import React, { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { useBranches } from "../hooks/useBranches";
+import { BranchGraph } from "../components/BranchGraph";
+import type { Branch } from "../../../../types/api.js";
+
+const numberFormatter = new Intl.NumberFormat("ja-JP");
+
+const BRANCH_TYPE_LABEL: Record<Branch["type"], string> = {
+  local: "ローカル",
+  remote: "リモート",
+};
+
+const MERGE_STATUS_LABEL: Record<Branch["mergeStatus"], string> = {
+  merged: "マージ済み",
+  unmerged: "未マージ",
+  unknown: "状態不明",
+};
+
+const MERGE_STATUS_TONE: Record<Branch["mergeStatus"], "success" | "warning" | "muted"> = {
+  merged: "success",
+  unmerged: "warning",
+  unknown: "muted",
+};
+
+interface PageStateMessage {
+  title: string;
+  description: string;
+}
+
+const SEARCH_PLACEHOLDER = "ブランチ名やタイプで検索...";
+
+export function BranchListPage() {
+  const { data, isLoading, error } = useBranches();
+  const [query, setQuery] = useState("");
+
+  const branches = data ?? [];
+
+  const metrics = useMemo(() => {
+    const worktrees = branches.filter((branch) => Boolean(branch.worktreePath)).length;
+    const remote = branches.filter((branch) => branch.type === "remote").length;
+    const healthy = branches.filter((branch) => branch.divergence?.upToDate).length;
+
+    return {
+      total: branches.length,
+      worktrees,
+      remote,
+      healthy,
+    };
+  }, [branches]);
+
+  const normalizedQuery = query.trim().toLowerCase();
+
+  const filteredBranches = useMemo(() => {
+    if (!normalizedQuery) {
+      return branches;
+    }
+
+    return branches.filter((branch) => {
+      const haystack = [
+        branch.name,
+        branch.type,
+        branch.mergeStatus,
+        branch.commitMessage ?? "",
+        branch.worktreePath ?? "",
+      ]
+        .join(" ")
+        .toLowerCase();
+      return haystack.includes(normalizedQuery);
+    });
+  }, [branches, normalizedQuery]);
+
+  const pageState: PageStateMessage | null = useMemo(() => {
+    if (isLoading) {
+      return {
+        title: "データを読み込み中",
+        description: "最新のブランチ一覧を取得しています...",
+      };
+    }
+
+    if (error) {
+      return {
+        title: "ブランチの取得に失敗しました",
+        description:
+          error instanceof Error ? error.message : "未知のエラーが発生しました。",
+      };
+    }
+
+    if (!branches.length) {
+      return {
+        title: "ブランチが見つかりません",
+        description: "git fetch origin などで最新のブランチを取得してください。",
+      };
+    }
+
+    return null;
+  }, [branches.length, error, isLoading]);
+
+  return (
+    <div className="app-shell">
+      <header className="page-hero">
+        <p className="page-hero__eyebrow">WORKTREE DASHBOARD</p>
+        <h1>gwt Control Center</h1>
+        <p>
+          ローカルのGitブランチとAIツールをブラウザ上で一元管理し、Worktree状態を瞬時に
+          可視化します。
+        </p>
+        <div className="page-hero__meta">リアルタイムで更新されるステータスビュー</div>
+      </header>
+
+      <main className="page-content">
+        {!pageState && filteredBranches.length > 0 && (
+          <BranchGraph branches={filteredBranches} />
+        )}
+
+        <section className="metrics-grid">
+          <article className="metric-card">
+            <p className="metric-card__label">総ブランチ数</p>
+            <p className="metric-card__value" data-testid="metric-total">
+              {numberFormatter.format(metrics.total)}
+            </p>
+            <p className="metric-card__hint">ローカル + リモート</p>
+          </article>
+          <article className="metric-card">
+            <p className="metric-card__label">作成済みWorktree</p>
+            <p className="metric-card__value" data-testid="metric-worktrees">
+              {numberFormatter.format(metrics.worktrees)}
+            </p>
+            <p className="metric-card__hint">即座にAIツールを起動可能</p>
+          </article>
+          <article className="metric-card">
+            <p className="metric-card__label">リモート追跡ブランチ</p>
+            <p className="metric-card__value">
+              {numberFormatter.format(metrics.remote)}
+            </p>
+            <p className="metric-card__hint">origin との同期ステータス</p>
+          </article>
+          <article className="metric-card">
+            <p className="metric-card__label">最新コミットが最新</p>
+            <p className="metric-card__value">
+              {numberFormatter.format(metrics.healthy)}
+            </p>
+            <p className="metric-card__hint">divergence 0 のブランチ</p>
+          </article>
+        </section>
+
+        <section className="toolbar">
+          <label className="toolbar__field">
+            <span className="toolbar__icon" aria-hidden="true">
+              🔍
+            </span>
+            <input
+              type="search"
+              className="search-input"
+              placeholder={SEARCH_PLACEHOLDER}
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+            />
+          </label>
+          <span className="toolbar__count">
+            {numberFormatter.format(filteredBranches.length)} / {" "}
+            {numberFormatter.format(metrics.total)} branches
+          </span>
+        </section>
+
+        {pageState ? (
+          <div className="page-state page-state--card">
+            <h2>{pageState.title}</h2>
+            <p>{pageState.description}</p>
+          </div>
+        ) : filteredBranches.length === 0 ? (
+          <div className="empty-state">
+            <h3>一致するブランチがありません</h3>
+            <p>
+              検索条件を見直すか、タグ・ブランチタイプ・コミットメッセージなど別のキーワードを
+              試してください。
+            </p>
+          </div>
+        ) : (
+          <div className="branch-grid">
+            {filteredBranches.map((branch) => (
+              <article key={branch.name} className="branch-card">
+                <div className="branch-card__header">
+                  <div>
+                    <p className="branch-card__eyebrow">
+                      {BRANCH_TYPE_LABEL[branch.type]}ブランチ
+                    </p>
+                    <h2>{branch.name}</h2>
+                  </div>
+                  <div className="badge-group">
+                    <span className={`status-badge status-badge--${branch.type}`}>
+                      {BRANCH_TYPE_LABEL[branch.type]}
+                    </span>
+                    <span className={`status-badge status-badge--${MERGE_STATUS_TONE[branch.mergeStatus]}`}>
+                      {MERGE_STATUS_LABEL[branch.mergeStatus]}
+                    </span>
+                    <span
+                      className={`status-badge ${
+                        branch.worktreePath
+                          ? "status-badge--success"
+                          : "status-badge--muted"
+                      }`}
+                    >
+                      {branch.worktreePath ? "Worktreeあり" : "Worktree未作成"}
+                    </span>
+                  </div>
+                </div>
+
+                <p className="branch-card__commit">
+                  {branch.commitMessage ?? "コミットメッセージがありません"}
+                </p>
+
+                <dl className="metadata-grid metadata-grid--compact">
+                  <div>
+                    <dt>最新コミット</dt>
+                    <dd>{branch.commitHash.slice(0, 7)}</dd>
+                  </div>
+                  <div>
+                    <dt>Author</dt>
+                    <dd>{branch.author ?? "N/A"}</dd>
+                  </div>
+                  <div>
+                    <dt>Worktree</dt>
+                    <dd>{branch.worktreePath ?? "未作成"}</dd>
+                  </div>
+                </dl>
+
+                {branch.divergence && (
+                  <div className="pill-group">
+                    <span className="pill">Ahead {branch.divergence.ahead}</span>
+                    <span className="pill">Behind {branch.divergence.behind}</span>
+                    <span
+                      className={`pill ${
+                        branch.divergence.upToDate ? "pill--success" : "pill--warning"
+                      }`}
+                    >
+                      {branch.divergence.upToDate ? "最新" : "更新あり"}
+                    </span>
+                  </div>
+                )}
+
+                <div className="branch-card__actions">
+                  <Link
+                    className="button button--ghost"
+                    to={`/${encodeURIComponent(branch.name)}`}
+                  >
+                    詳細を見る
+                  </Link>
+                  <span
+                    className={`info-pill ${
+                      branch.worktreePath ? "info-pill--success" : "info-pill--warning"
+                    }`}
+                  >
+                    {branch.worktreePath ?? "Worktree未作成"}
+                  </span>
+                </div>
+              </article>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,203 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import type { ConfigPayload, CustomAITool, EnvironmentVariable } from "../../../../types/api.js";
+import { useConfig, useUpdateConfig } from "../hooks/useConfig";
+import { EnvEditor, createEnvRow, type EnvRow } from "../components/EnvEditor";
+
+type ToolEnvState = Record<string, EnvRow[]>;
+
+function rowsFromVariables(variables?: EnvironmentVariable[] | null): EnvRow[] {
+  if (!variables) {
+    return [];
+  }
+  return variables.map((variable) => {
+    const partial: Partial<EnvRow> = {
+      key: variable.key,
+      value: variable.value,
+    };
+
+    if (typeof variable.importedFromOs === "boolean") {
+      partial.importedFromOs = variable.importedFromOs;
+    }
+    if (variable.lastUpdated) {
+      partial.lastUpdated = variable.lastUpdated;
+    }
+
+    return createEnvRow(partial);
+  });
+}
+
+function serializeRows(rows: EnvRow[]): EnvironmentVariable[] {
+  return rows
+    .filter((row) => row.key.trim().length > 0)
+    .map((row) => ({
+      key: row.key.trim().toUpperCase(),
+      value: row.value,
+    }));
+}
+
+function buildPayload(
+  base: ConfigPayload | undefined,
+  sharedEnv: EnvRow[],
+  toolState: ToolEnvState,
+): ConfigPayload {
+  const tools: CustomAITool[] = (base?.tools ?? []).map((tool) => ({
+    ...tool,
+    env: serializeRows(toolState[tool.id] ?? []),
+  }));
+
+  return {
+    version: base?.version ?? "1.0.0",
+    env: serializeRows(sharedEnv),
+    tools,
+  };
+}
+
+export function ConfigManagementPage() {
+  const { data, isLoading, error } = useConfig();
+  const updateConfig = useUpdateConfig();
+  const [sharedEnv, setSharedEnv] = useState<EnvRow[]>([]);
+  const [toolEnv, setToolEnv] = useState<ToolEnvState>({});
+  const [banner, setBanner] = useState<{ type: "success" | "error"; message: string } | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (!data) return;
+    setSharedEnv(rowsFromVariables(data.env));
+    const toolState: ToolEnvState = {};
+    data.tools?.forEach((tool) => {
+      toolState[tool.id] = rowsFromVariables(tool.env);
+    });
+    setToolEnv(toolState);
+  }, [data]);
+
+  const serializedOriginalShared = useMemo(
+    () => JSON.stringify(data?.env ?? []),
+    [data?.env],
+  );
+  const serializedCurrentShared = useMemo(
+    () => JSON.stringify(serializeRows(sharedEnv)),
+    [sharedEnv],
+  );
+
+  const hasInvalidRows = useMemo(() => {
+    const keyInvalid = sharedEnv.some((row) => !row.key || /[^A-Z0-9_]/.test(row.key));
+    const valueInvalid = sharedEnv.some((row) => row.key && row.value.trim().length === 0);
+    const toolInvalid = Object.values(toolEnv).some((rows) =>
+      rows.some((row) => !row.key || /[^A-Z0-9_]/.test(row.key) || row.value.trim().length === 0),
+    );
+    return keyInvalid || valueInvalid || toolInvalid;
+  }, [sharedEnv, toolEnv]);
+
+  const hasChanges = useMemo(() => {
+    if (serializedOriginalShared !== serializedCurrentShared) {
+      return true;
+    }
+    if (!data) return false;
+    const currentTool = data.tools?.map((tool) => serializeRows(toolEnv[tool.id] ?? [])) ?? [];
+    const originalTool = data.tools?.map((tool) => tool.env ?? []) ?? [];
+    return JSON.stringify(currentTool) !== JSON.stringify(originalTool);
+  }, [data, serializedOriginalShared, serializedCurrentShared, toolEnv]);
+
+  const handleSave = async () => {
+    if (!data) return;
+    try {
+      const payload = buildPayload(data, sharedEnv, toolEnv);
+      await updateConfig.mutateAsync(payload);
+      setBanner({ type: "success", message: "設定を保存しました" });
+    } catch (err) {
+      setBanner({
+        type: "error",
+        message: err instanceof Error ? err.message : "保存に失敗しました",
+      });
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="app-shell">
+        <div className="page-state page-state--centered">
+          <h1>読み込み中</h1>
+          <p>設定を読み込んでいます...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="app-shell">
+        <div className="page-state page-state--centered">
+          <h1>設定の取得に失敗しました</h1>
+          <p>{error instanceof Error ? error.message : "未知のエラーです"}</p>
+          <Link to="/" className="button button--ghost">
+            ブランチ一覧に戻る
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-shell">
+      <header className="page-hero">
+        <Link to="/" className="page-hero__back">
+          ← ブランチ一覧へ
+        </Link>
+        <p className="page-hero__eyebrow">CONFIG</p>
+        <h1>環境変数の管理</h1>
+        <p className="page-hero__subtitle">
+          共通環境変数とツールごとの上書きをブラウザから編集できます。
+        </p>
+        <div className="page-hero__actions">
+          <button
+            type="button"
+            className="button button--primary"
+            onClick={handleSave}
+            disabled={updateConfig.isPending || hasInvalidRows || !hasChanges}
+          >
+            {updateConfig.isPending ? "保存中..." : "保存"}
+          </button>
+        </div>
+        {banner && <div className={`inline-banner inline-banner--${banner.type}`}>{banner.message}</div>}
+      </header>
+
+      <main className="page-content page-content--wide">
+        <section className="section-card">
+          <EnvEditor
+            title="共通環境変数"
+            description="全てのAIツールで共有される値。PAT やプロキシ設定などはこちらに入力してください。"
+            rows={sharedEnv}
+            onChange={setSharedEnv}
+          />
+        </section>
+
+        <section className="section-card">
+          <h2>ツール固有の環境変数</h2>
+          <p className="section-card__body">
+            各ツール固有に上書きしたい値がある場合はこちらから設定します。共通設定との競合がある場合は
+            ツール設定が優先されます。
+          </p>
+          <div className="env-editor__tool-list">
+            {data?.tools?.map((tool) => (
+              <div key={tool.id} className="env-editor__tool">
+                <EnvEditor
+                  title={tool.displayName}
+                  description={`${tool.executionType} / ${tool.command}`}
+                  rows={toolEnv[tool.id] ?? []}
+                  onChange={(rows) =>
+                    setToolEnv((prev) => ({
+                      ...prev,
+                      [tool.id]: rows,
+                    }))
+                  }
+                />
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

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

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

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

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

@@ -0,0 +1,54 @@
+import { loadToolsConfig, saveToolsConfig } from "../../../config/tools.js";
+import { recordEnvHistory } from "../../../config/env-history.js";
+import type { EnvironmentHistoryEntry } from "../../../types/api.js";
+
+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 loadToolsConfig();
+  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) {
+    return [];
+  }
+
+  await saveToolsConfig({
+    ...config,
+    env: sharedEnv,
+  });
+
+  const timestamp = new Date().toISOString();
+  const historyEntries: EnvironmentHistoryEntry[] = importedKeys.map((key) => ({
+    key,
+    action: "import",
+    source: "os",
+    timestamp,
+  }));
+  await recordEnvHistory(historyEntries);
+
+  return importedKeys;
+}
+
+export function getImportedEnvKeys(): string[] {
+  return Array.from(importedKeySet);
+}

package/src/web/server/index.ts

@@ -0,0 +1,74 @@
+/**
+ * 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";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/**
+ * Webサーバーを起動
+ */
+export async function startWebServer(): Promise<void> {
+  const fastify = Fastify({
+    logger: {
+      level: process.env.LOG_LEVEL || "info",
+    },
+  });
+
+  // PTYマネージャーとWebSocketハンドラーを初期化
+  const ptyManager = new PTYManager();
+  const wsHandler = new WebSocketHandler(ptyManager);
+
+  // 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: "/",
+  });
+
+  // サーバー起動
+  try {
+    const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;
+    // Docker環境からホストOSでアクセスできるよう、0.0.0.0でリッスン
+    // IPv4/IPv6両方対応のため、listenOnStart: false も検討可能
+    const host = process.env.HOST || "0.0.0.0";
+
+    await fastify.listen({ port, host });
+    console.log(`Web UI server running at http://${host}:${port}`);
+    console.log(`Access from host: http://localhost:${port}`);
+  } catch (err) {
+    fastify.log.error(err);
+    process.exit(1);
+  }
+}