@akiojin/gwt 2.0.0

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

@@ -0,0 +1,145 @@
+import React from "react";
+
+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="env-editor">
+      <header className="env-editor__header">
+        <div>
+          <h3>{title}</h3>
+          {description && <p className="env-editor__description">{description}</p>}
+        </div>
+        {allowAdd && (
+          <button type="button" className="button button--secondary" onClick={handleAdd}>
+            変数を追加
+          </button>
+        )}
+      </header>
+
+      {rows.length === 0 ? (
+        <p className="env-editor__empty">{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" }}>
+                        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>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,137 @@
+/**
+ * Terminal Component
+ *
+ * xterm.jsを使用したブラウザ端末エミュレータ。
+ * WebSocket経由でPTYプロセスと通信します。
+ */
+
+import React, { useEffect, useRef } from "react";
+import { Terminal as XTerm } from "xterm";
+import { FitAddon } from "xterm-addon-fit";
+import { PTYWebSocket } from "../lib/websocket";
+import "xterm/css/xterm.css";
+
+export interface TerminalProps {
+  sessionId: string;
+  onExit?: (code: number) => void;
+  onError?: (message: string) => void;
+}
+
+export function Terminal({ sessionId, onExit, onError }: TerminalProps) {
+  const terminalRef = useRef<HTMLDivElement>(null);
+  const xtermRef = useRef<XTerm | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+  const wsRef = useRef<PTYWebSocket | null>(null);
+
+  useEffect(() => {
+    if (!terminalRef.current) {
+      return;
+    }
+
+    // xterm.jsのインスタンスを作成
+    const xterm = new XTerm({
+      cursorBlink: true,
+      fontSize: 14,
+      fontFamily: '"Cascadia Code", "SF Mono", Monaco, Consolas, monospace',
+      theme: {
+        background: "#1e1e1e",
+        foreground: "#d4d4d4",
+        cursor: "#aeafad",
+        black: "#000000",
+        red: "#cd3131",
+        green: "#0dbc79",
+        yellow: "#e5e510",
+        blue: "#2472c8",
+        magenta: "#bc3fbc",
+        cyan: "#11a8cd",
+        white: "#e5e5e5",
+        brightBlack: "#666666",
+        brightRed: "#f14c4c",
+        brightGreen: "#23d18b",
+        brightYellow: "#f5f543",
+        brightBlue: "#3b8eea",
+        brightMagenta: "#d670d6",
+        brightCyan: "#29b8db",
+        brightWhite: "#ffffff",
+      },
+    });
+
+    // FitAddonを追加
+    const fitAddon = new FitAddon();
+    xterm.loadAddon(fitAddon);
+
+    // ターミナルをDOMにマウント
+    xterm.open(terminalRef.current);
+    fitAddon.fit();
+
+    xtermRef.current = xterm;
+    fitAddonRef.current = fitAddon;
+
+    // WebSocket接続を確立
+    const ws = new PTYWebSocket(sessionId, {
+      onOutput: (data) => {
+        xterm.write(data);
+      },
+      onExit: (code) => {
+        xterm.write(`\r\n\r\n[Process exited with code ${code}]\r\n`);
+        onExit?.(code);
+      },
+      onError: (message) => {
+        xterm.write(`\r\n\r\n[Error: ${message}]\r\n`);
+        onError?.(message);
+      },
+      onOpen: () => {
+        xterm.write("Connected to session...\r\n");
+      },
+      onClose: () => {
+        xterm.write("\r\n[Connection closed]\r\n");
+      },
+    });
+
+    ws.connect();
+    wsRef.current = ws;
+
+    // ユーザー入力をWebSocketに送信
+    xterm.onData((data) => {
+      ws.sendInput(data);
+    });
+
+    // ウィンドウリサイズ時にターミナルサイズを調整
+    const handleResize = () => {
+      fitAddon.fit();
+      if (ws.isConnected()) {
+        ws.sendResize(xterm.cols, xterm.rows);
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    let resizeObserver: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        handleResize();
+      });
+      resizeObserver.observe(terminalRef.current);
+    }
+
+    // クリーンアップ
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      resizeObserver?.disconnect();
+      ws.disconnect();
+      xterm.dispose();
+    };
+  }, [sessionId, onExit, onError]);
+
+  return (
+    <div
+      ref={terminalRef}
+      style={{
+        width: "100%",
+        height: "100%",
+        padding: "8px",
+        backgroundColor: "#1e1e1e",
+      }}
+    />
+  );
+}

package/src/web/client/src/hooks/useBranches.ts

@@ -0,0 +1,41 @@
+/**
+ * ブランチ関連のReact Hook
+ */
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { branchApi } from "../lib/api";
+import type { Branch } from "../../../../types/api.js";
+
+/**
+ * ブランチ一覧を取得
+ */
+export function useBranches() {
+  return useQuery<Branch[]>({
+    queryKey: ["branches"],
+    queryFn: branchApi.list,
+  });
+}
+
+/**
+ * 特定のブランチ情報を取得
+ */
+export function useBranch(branchName: string) {
+  return useQuery<Branch>({
+    queryKey: ["branches", branchName],
+    queryFn: () => branchApi.get(branchName),
+    enabled: !!branchName,
+  });
+}
+
+export function useSyncBranch(branchName: string) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (payload: { worktreePath: string }) =>
+      branchApi.sync(branchName, payload),
+    onSuccess: (result) => {
+      queryClient.setQueryData(["branches", branchName], result.branch);
+      queryClient.invalidateQueries({ queryKey: ["branches"] });
+    },
+  });
+}

package/src/web/client/src/hooks/useConfig.ts

@@ -0,0 +1,31 @@
+/**
+ * Config Hooks
+ */
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { configApi } from "../lib/api";
+import type { ConfigPayload } from "../../../../types/api.js";
+
+/**
+ * カスタムAIツール設定を取得
+ */
+export function useConfig() {
+  return useQuery<ConfigPayload>({
+    queryKey: ["config"],
+    queryFn: configApi.get,
+  });
+}
+
+/**
+ * カスタムAIツール設定を更新
+ */
+export function useUpdateConfig() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: configApi.update,
+    onSuccess: (data: ConfigPayload) => {
+      queryClient.setQueryData(["config"], data);
+    },
+  });
+}

package/src/web/client/src/hooks/useSessions.ts

@@ -0,0 +1,59 @@
+/**
+ * セッション関連のReact Hook
+ */
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { sessionApi } from "../lib/api";
+import type {
+  AIToolSession,
+  StartSessionRequest,
+} from "../../../../types/api.js";
+
+/**
+ * セッション一覧を取得
+ */
+export function useSessions() {
+  return useQuery<AIToolSession[]>({
+    queryKey: ["sessions"],
+    queryFn: sessionApi.list,
+  });
+}
+
+/**
+ * 特定のセッション情報を取得
+ */
+export function useSession(sessionId: string) {
+  return useQuery<AIToolSession>({
+    queryKey: ["sessions", sessionId],
+    queryFn: () => sessionApi.get(sessionId),
+    enabled: !!sessionId,
+  });
+}
+
+/**
+ * セッションを開始
+ */
+export function useStartSession() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (request: StartSessionRequest) => sessionApi.start(request),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessions"] });
+    },
+  });
+}
+
+/**
+ * セッションを終了
+ */
+export function useDeleteSession() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (sessionId: string) => sessionApi.delete(sessionId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["sessions"] });
+    },
+  });
+}

package/src/web/client/src/hooks/useWorktrees.ts

@@ -0,0 +1,47 @@
+/**
+ * Worktree関連のReact Hook
+ */
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { worktreeApi } from "../lib/api";
+import type { Worktree, CreateWorktreeRequest } from "../../../../types/api.js";
+
+/**
+ * Worktree一覧を取得
+ */
+export function useWorktrees() {
+  return useQuery<Worktree[]>({
+    queryKey: ["worktrees"],
+    queryFn: worktreeApi.list,
+  });
+}
+
+/**
+ * Worktreeを作成
+ */
+export function useCreateWorktree() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (request: CreateWorktreeRequest) => worktreeApi.create(request),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["worktrees"] });
+      queryClient.invalidateQueries({ queryKey: ["branches"] });
+    },
+  });
+}
+
+/**
+ * Worktreeを削除
+ */
+export function useDeleteWorktree() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (path: string) => worktreeApi.delete(path),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["worktrees"] });
+      queryClient.invalidateQueries({ queryKey: ["branches"] });
+    },
+  });
+}