@akiojin/gwt 2.0.0

package/src/web/client/src/lib/api.ts

@@ -0,0 +1,184 @@
+/**
+ * REST API Client
+ *
+ * バックエンドのREST APIと通信するクライアント。
+ * 仕様: specs/SPEC-d5e56259/contracts/rest-api.yaml
+ */
+
+import type {
+  Branch,
+  Worktree,
+  AIToolSession,
+  HealthResponse,
+  CreateWorktreeRequest,
+  StartSessionRequest,
+  BranchSyncRequest,
+  BranchSyncResult,
+  ConfigPayload,
+} from "../../../../types/api.js";
+
+const API_BASE = "/api";
+
+/**
+ * APIエラー
+ */
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    public statusCode: number,
+    public details?: string | null,
+  ) {
+    super(message);
+    this.name = "ApiError";
+  }
+}
+
+/**
+ * fetchラッパー - エラーハンドリングとJSON解析
+ */
+async function apiFetch<T>(url: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+  });
+
+  const data = await response.json();
+
+  if (!response.ok || !data.success) {
+    throw new ApiError(
+      data.error || "API request failed",
+      response.status,
+      data.details,
+    );
+  }
+
+  return data.data;
+}
+
+/**
+ * ヘルスチェック
+ */
+export async function checkHealth(): Promise<HealthResponse> {
+  const response = await fetch(`${API_BASE}/health`);
+  return response.json();
+}
+
+/**
+ * ブランチAPI
+ */
+export const branchApi = {
+  /**
+   * すべてのブランチ一覧を取得
+   */
+  list: async (): Promise<Branch[]> => {
+    return apiFetch<Branch[]>(`${API_BASE}/branches`);
+  },
+
+  /**
+   * 特定のブランチ情報を取得
+   */
+  get: async (branchName: string): Promise<Branch> => {
+    const encoded = encodeURIComponent(branchName);
+    return apiFetch<Branch>(`${API_BASE}/branches/${encoded}`);
+  },
+
+  sync: async (
+    branchName: string,
+    payload: BranchSyncRequest,
+  ): Promise<BranchSyncResult> => {
+    const encoded = encodeURIComponent(branchName);
+    return apiFetch<BranchSyncResult>(`${API_BASE}/branches/${encoded}/sync`, {
+      method: "POST",
+      body: JSON.stringify(payload),
+    });
+  },
+};
+
+/**
+ * WorktreeAPI
+ */
+export const worktreeApi = {
+  /**
+   * すべてのWorktree一覧を取得
+   */
+  list: async (): Promise<Worktree[]> => {
+    return apiFetch<Worktree[]>(`${API_BASE}/worktrees`);
+  },
+
+  /**
+   * 新しいWorktreeを作成
+   */
+  create: async (request: CreateWorktreeRequest): Promise<Worktree> => {
+    return apiFetch<Worktree>(`${API_BASE}/worktrees`, {
+      method: "POST",
+      body: JSON.stringify(request),
+    });
+  },
+
+  /**
+   * Worktreeを削除
+   */
+  delete: async (path: string): Promise<void> => {
+    const url = new URL(`${API_BASE}/worktrees/delete`, window.location.origin);
+    url.searchParams.set("path", path);
+    await apiFetch<void>(url.toString(), {
+      method: "DELETE",
+    });
+  },
+};
+
+/**
+ * セッションAPI
+ */
+export const sessionApi = {
+  /**
+   * すべてのセッション一覧を取得
+   */
+  list: async (): Promise<AIToolSession[]> => {
+    return apiFetch<AIToolSession[]>(`${API_BASE}/sessions`);
+  },
+
+  /**
+   * 新しいセッションを開始
+   */
+  start: async (request: StartSessionRequest): Promise<AIToolSession> => {
+    return apiFetch<AIToolSession>(`${API_BASE}/sessions`, {
+      method: "POST",
+      body: JSON.stringify(request),
+    });
+  },
+
+  /**
+   * 特定のセッション情報を取得
+   */
+  get: async (sessionId: string): Promise<AIToolSession> => {
+    return apiFetch<AIToolSession>(`${API_BASE}/sessions/${sessionId}`);
+  },
+
+  /**
+   * セッションを終了
+   */
+  delete: async (sessionId: string): Promise<void> => {
+    await apiFetch<void>(`${API_BASE}/sessions/${sessionId}`, {
+      method: "DELETE",
+    });
+  },
+};
+
+/**
+ * 設定API
+ */
+export const configApi = {
+  /**
+   * カスタムAI Tool設定を取得
+   */
+  get: async (): Promise<ConfigPayload> => apiFetch(`${API_BASE}/config`),
+  update: async (request: ConfigPayload): Promise<ConfigPayload> =>
+    apiFetch(`${API_BASE}/config`, {
+      method: "PUT",
+      body: JSON.stringify(request),
+    }),
+};

package/src/web/client/src/lib/websocket.ts

@@ -0,0 +1,174 @@
+/**
+ * WebSocket Client
+ *
+ * PTYセッションとの双方向通信を管理するクライアント。
+ * 仕様: specs/SPEC-d5e56259/contracts/websocket.md
+ */
+
+import type {
+  ServerMessage,
+  InputMessage,
+  ResizeMessage,
+  PingMessage,
+  OutputMessage,
+  ExitMessage,
+  ErrorMessage,
+} from "../../../../types/api.js";
+
+export type WebSocketEventHandler = {
+  onOutput?: (data: string) => void;
+  onExit?: (code: number, signal?: string) => void;
+  onError?: (message: string) => void;
+  onPong?: () => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+};
+
+/**
+ * PTY WebSocketクライアント
+ */
+export class PTYWebSocket {
+  private ws: WebSocket | null = null;
+  private handlers: WebSocketEventHandler;
+  private sessionId: string;
+
+  constructor(sessionId: string, handlers: WebSocketEventHandler) {
+    this.sessionId = sessionId;
+    this.handlers = handlers;
+  }
+
+  /**
+   * WebSocket接続を確立
+   */
+  public connect(): void {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const host = window.location.host;
+    const url = `${protocol}//${host}/api/sessions/${this.sessionId}/terminal?sessionId=${this.sessionId}`;
+
+    this.ws = new WebSocket(url);
+
+    this.ws.onopen = () => {
+      this.handlers.onOpen?.();
+    };
+
+    this.ws.onmessage = (event) => {
+      try {
+        const message: ServerMessage = JSON.parse(event.data);
+        this.handleServerMessage(message);
+      } catch (error) {
+        console.error("Failed to parse WebSocket message:", error);
+      }
+    };
+
+    this.ws.onerror = (event) => {
+      console.error("WebSocket error:", event);
+      this.handlers.onError?.("WebSocket connection error");
+    };
+
+    this.ws.onclose = () => {
+      this.handlers.onClose?.();
+    };
+  }
+
+  /**
+   * サーバーメッセージを処理
+   */
+  private handleServerMessage(message: ServerMessage): void {
+    switch (message.type) {
+      case "output": {
+        const outputMsg = message as OutputMessage;
+        this.handlers.onOutput?.(outputMsg.data);
+        break;
+      }
+      case "exit": {
+        const exitMsg = message as ExitMessage;
+        this.handlers.onExit?.(exitMsg.data.code, exitMsg.data.signal);
+        break;
+      }
+      case "error": {
+        const errorMsg = message as ErrorMessage;
+        this.handlers.onError?.(errorMsg.data.message);
+        break;
+      }
+      case "pong": {
+        this.handlers.onPong?.();
+        break;
+      }
+      default: {
+        const unknownMsg = message as { type: string };
+        console.warn("Unknown server message type:", unknownMsg.type);
+        break;
+      }
+    }
+  }
+
+  /**
+   * 入力データを送信
+   */
+  public sendInput(data: string): void {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      console.error("WebSocket is not connected");
+      return;
+    }
+
+    const message: InputMessage = {
+      type: "input",
+      data,
+      timestamp: new Date().toISOString(),
+    };
+
+    this.ws.send(JSON.stringify(message));
+  }
+
+  /**
+   * ターミナルサイズ変更を送信
+   */
+  public sendResize(cols: number, rows: number): void {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      console.error("WebSocket is not connected");
+      return;
+    }
+
+    const message: ResizeMessage = {
+      type: "resize",
+      data: { cols, rows },
+      timestamp: new Date().toISOString(),
+    };
+
+    this.ws.send(JSON.stringify(message));
+  }
+
+  /**
+   * Pingを送信
+   */
+  public sendPing(): void {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      console.error("WebSocket is not connected");
+      return;
+    }
+
+    const message: PingMessage = {
+      type: "ping",
+      timestamp: new Date().toISOString(),
+    };
+
+    this.ws.send(JSON.stringify(message));
+  }
+
+  /**
+   * WebSocket接続を切断
+   */
+  public disconnect(): void {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  /**
+   * 接続状態を取得
+   */
+  public isConnected(): boolean {
+    return this.ws !== null && this.ws.readyState === WebSocket.OPEN;
+  }
+}

package/src/web/client/src/main.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./router";
+import "./index.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+      staleTime: 30000, // 30秒
+    },
+  },
+});
+
+const rootElement = document.getElementById("root");
+if (!rootElement) {
+  throw new Error("Root element not found");
+}
+
+ReactDOM.createRoot(rootElement).render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>
+  </React.StrictMode>,
+);