@akiojin/gwt 4.12.2 → 6.0.0

package/src/web/client/src/index.css

@@ -1,349 +0,0 @@
-@import "tailwindcss";
-
-/* ===================================
-   Bioluminescent Neural Network Theme
-   Deep oceanic void with living light
-   =================================== */
-
-@theme {
-  /* Void - the deep abyss */
-  --color-background: hsl(220 25% 3%);
-  --color-foreground: hsl(180 20% 95%);
-
-  /* Card - membrane surfaces */
-  --color-card: hsl(220 30% 7%);
-  --color-card-foreground: hsl(180 15% 92%);
-
-  /* Muted - shadow depths */
-  --color-muted: hsl(220 25% 12%);
-  --color-muted-foreground: hsl(200 10% 55%);
-
-  /* Border - membrane edges */
-  --color-border: hsl(200 30% 18%);
-
-  /* Primary - bioluminescent cyan */
-  --color-primary: hsl(185 100% 65%);
-  --color-primary-foreground: hsl(220 30% 5%);
-
-  /* Secondary - deep tissue */
-  --color-secondary: hsl(220 35% 15%);
-  --color-secondary-foreground: hsl(180 20% 90%);
-
-  /* Accent - synaptic magenta */
-  --color-accent: hsl(310 85% 60%);
-  --color-accent-foreground: hsl(0 0% 100%);
-
-  /* Destructive */
-  --color-destructive: hsl(0 75% 55%);
-  --color-destructive-foreground: hsl(0 0% 100%);
-
-  /* Status - neural signals */
-  --color-success: hsl(160 90% 45%);
-  --color-warning: hsl(45 95% 55%);
-  --color-error: hsl(0 80% 55%);
-
-  /* Branch colors - neuron types */
-  --color-local: hsl(280 85% 65%);
-  --color-remote: hsl(200 90% 55%);
-
-  /* Neural-specific colors */
-  --color-synapse-glow: hsl(185 100% 70%);
-  --color-synapse-pulse: hsl(310 90% 65%);
-  --color-dendrite: hsl(190 80% 50%);
-  --color-axon: hsl(175 70% 45%);
-  --color-vesicle: hsl(300 80% 70%);
-
-  /* Radius */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-  --radius-full: 9999px;
-}
-
-/* Base styles */
-* {
-  border-color: var(--color-border);
-}
-
-body {
-  background-color: var(--color-background);
-  color: var(--color-foreground);
-  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
-}
-
-/* ===================================
-   Synaptic Graph - Living Animations
-   =================================== */
-
-/* Neural membrane breathing */
-@keyframes membrane-breathe {
-  0%, 100% {
-    transform: scale(1);
-    filter: brightness(1);
-  }
-  50% {
-    transform: scale(1.02);
-    filter: brightness(1.1);
-  }
-}
-
-/* Soma (cell body) pulse */
-@keyframes soma-pulse {
-  0%, 100% {
-    box-shadow:
-      0 0 0 0 hsl(185 100% 65% / 0.4),
-      0 0 20px 0 hsl(185 100% 65% / 0.2),
-      inset 0 0 15px hsl(185 100% 65% / 0.1);
-  }
-  50% {
-    box-shadow:
-      0 0 0 8px hsl(185 100% 65% / 0),
-      0 0 30px 5px hsl(185 100% 65% / 0.3),
-      inset 0 0 20px hsl(185 100% 65% / 0.2);
-  }
-}
-
-/* Worktree active state - stronger signal */
-@keyframes active-synapse {
-  0%, 100% {
-    box-shadow:
-      0 0 0 0 hsl(160 90% 45% / 0.6),
-      0 0 25px 0 hsl(160 90% 45% / 0.4),
-      0 0 50px 0 hsl(185 100% 65% / 0.2);
-  }
-  50% {
-    box-shadow:
-      0 0 0 12px hsl(160 90% 45% / 0),
-      0 0 40px 10px hsl(160 90% 45% / 0.5),
-      0 0 60px 5px hsl(185 100% 65% / 0.3);
-  }
-}
-
-/* Vesicle release - particle burst */
-@keyframes vesicle-release {
-  0% {
-    transform: scale(0.8);
-    opacity: 0.3;
-  }
-  50% {
-    transform: scale(1.3);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(0.8);
-    opacity: 0.3;
-  }
-}
-
-/* Dendrite growth pulse */
-@keyframes dendrite-pulse {
-  0%, 100% {
-    stroke-dashoffset: 0;
-    filter: drop-shadow(0 0 2px hsl(185 100% 65% / 0.5));
-  }
-  50% {
-    stroke-dashoffset: -10;
-    filter: drop-shadow(0 0 6px hsl(185 100% 65% / 0.8));
-  }
-}
-
-/* Cluster nucleus orbit */
-@keyframes nucleus-orbit {
-  0% {
-    transform: rotate(0deg) translateX(8px) rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg) translateX(8px) rotate(-360deg);
-  }
-}
-
-/* Cluster membrane morph */
-@keyframes membrane-morph {
-  0%, 100% {
-    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-  }
-  25% {
-    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
-  }
-  50% {
-    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
-  }
-  75% {
-    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
-  }
-}
-
-/* Flowing particle along path */
-@keyframes flow-particle {
-  0% {
-    offset-distance: 0%;
-    opacity: 0;
-  }
-  10% {
-    opacity: 1;
-  }
-  90% {
-    opacity: 1;
-  }
-  100% {
-    offset-distance: 100%;
-    opacity: 0;
-  }
-}
-
-/* Synapse spark */
-@keyframes synapse-spark {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 0.6;
-    filter: blur(0px);
-  }
-  50% {
-    transform: scale(1.5);
-    opacity: 1;
-    filter: blur(1px);
-  }
-}
-
-/* Utility classes */
-.animate-membrane-breathe {
-  animation: membrane-breathe 4s ease-in-out infinite;
-}
-
-.animate-soma-pulse {
-  animation: soma-pulse 3s ease-in-out infinite;
-}
-
-.animate-active-synapse {
-  animation: active-synapse 2s ease-in-out infinite;
-}
-
-.animate-vesicle-release {
-  animation: vesicle-release 2s ease-in-out infinite;
-}
-
-.animate-dendrite-pulse {
-  animation: dendrite-pulse 3s ease-in-out infinite;
-}
-
-.animate-nucleus-orbit {
-  animation: nucleus-orbit 8s linear infinite;
-}
-
-.animate-membrane-morph {
-  animation: membrane-morph 12s ease-in-out infinite;
-}
-
-.animate-synapse-spark {
-  animation: synapse-spark 2.5s ease-in-out infinite;
-}
-
-/* Neural glow effects */
-.neural-glow {
-  filter: drop-shadow(0 0 10px hsl(185 100% 65% / 0.5));
-}
-
-.neural-glow-strong {
-  filter: drop-shadow(0 0 15px hsl(185 100% 65% / 0.7))
-          drop-shadow(0 0 30px hsl(185 100% 65% / 0.3));
-}
-
-/* Gradient overlays for depth */
-.neural-gradient {
-  background: radial-gradient(
-    ellipse at center,
-    hsl(185 100% 65% / 0.15) 0%,
-    transparent 70%
-  );
-}
-
-/* ===================================
-   React Flow Customization
-   =================================== */
-
-.react-flow__node {
-  cursor: pointer;
-}
-
-.react-flow__pane {
-  background: radial-gradient(
-    ellipse 80% 50% at 50% 50%,
-    hsl(220 30% 8%) 0%,
-    hsl(220 25% 3%) 100%
-  );
-}
-
-.react-flow__background {
-  opacity: 0.3;
-}
-
-.react-flow__controls {
-  box-shadow: 0 4px 20px hsl(220 30% 0% / 0.5) !important;
-  border: 1px solid hsl(200 30% 20%) !important;
-  border-radius: 8px !important;
-  overflow: hidden;
-}
-
-.react-flow__controls button {
-  background: hsl(220 30% 10%) !important;
-  border-color: hsl(200 30% 18%) !important;
-  color: hsl(185 100% 65%) !important;
-  transition: all 0.2s ease;
-}
-
-.react-flow__controls button:hover {
-  background: hsl(220 30% 15%) !important;
-  box-shadow: inset 0 0 20px hsl(185 100% 65% / 0.1);
-}
-
-.react-flow__controls button svg {
-  fill: hsl(185 100% 65%) !important;
-}
-
-.react-flow__minimap {
-  background: hsl(220 30% 5%) !important;
-  border: 1px solid hsl(200 30% 18%) !important;
-  border-radius: 8px !important;
-  box-shadow: 0 4px 20px hsl(220 30% 0% / 0.5) !important;
-}
-
-.react-flow__minimap-mask {
-  fill: hsl(220 25% 3% / 0.85) !important;
-}
-
-/* ===================================
-   Detail Panel Animation
-   =================================== */
-
-@keyframes slide-in-neural {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-    filter: blur(10px);
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-    filter: blur(0);
-  }
-}
-
-.animate-in.slide-in-from-right {
-  animation: slide-in-neural 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-/* Scanline effect for sci-fi feel */
-.scanlines::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: repeating-linear-gradient(
-    0deg,
-    transparent,
-    transparent 2px,
-    hsl(185 100% 65% / 0.02) 2px,
-    hsl(185 100% 65% / 0.02) 4px
-  );
-  pointer-events: none;
-}

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

@@ -1,184 +0,0 @@
-/**
- * REST API Client
- *
- * バックエンドのREST APIと通信するクライアント。
- * 仕様: specs/SPEC-d5e56259/contracts/rest-api.yaml
- */
-
-import type {
-  Branch,
-  Worktree,
-  CodingAgentSession,
-  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<CodingAgentSession[]> => {
-    return apiFetch<CodingAgentSession[]>(`${API_BASE}/sessions`);
-  },
-
-  /**
-   * 新しいセッションを開始
-   */
-  start: async (request: StartSessionRequest): Promise<CodingAgentSession> => {
-    return apiFetch<CodingAgentSession>(`${API_BASE}/sessions`, {
-      method: "POST",
-      body: JSON.stringify(request),
-    });
-  },
-
-  /**
-   * 特定のセッション情報を取得
-   */
-  get: async (sessionId: string): Promise<CodingAgentSession> => {
-    return apiFetch<CodingAgentSession>(`${API_BASE}/sessions/${sessionId}`);
-  },
-
-  /**
-   * セッションを終了
-   */
-  delete: async (sessionId: string): Promise<void> => {
-    await apiFetch<void>(`${API_BASE}/sessions/${sessionId}`, {
-      method: "DELETE",
-    });
-  },
-};
-
-/**
- * 設定API
- */
-export const configApi = {
-  /**
-   * カスタム Coding Agent 設定を取得
-   */
-  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/coding-agent-colors.ts

@@ -1,149 +0,0 @@
-/**
- * Coding Agent Color Definitions for Web UI
- *
- * This module provides consistent color definitions for coding agents
- * in the Web UI (React/Tailwind) (SPEC-3b0ed29b FR-024~FR-027).
- *
- * Note: This mirrors the CLI color utility at src/utils/coding-agent-colors.ts
- * Both files should be kept in sync.
- */
-
-/**
- * Tool ID constants for coding agents
- */
-export const CODING_AGENT_TOOL_IDS = {
-  CLAUDE_CODE: "claude-code",
-  CODEX_CLI: "codex-cli",
-  GEMINI_CLI: "gemini-cli",
-  OPENCODE: "opencode",
-} as const;
-
-/**
- * Color definitions for coding agents
- */
-export const CODING_AGENT_COLORS = {
-  [CODING_AGENT_TOOL_IDS.CLAUDE_CODE]: {
-    hex: "#f6e05e",
-    tailwind: "text-yellow-400",
-    bgTailwind: "bg-yellow-400/20",
-    borderTailwind: "border-yellow-400",
-  },
-  [CODING_AGENT_TOOL_IDS.CODEX_CLI]: {
-    hex: "#4fd1c5",
-    tailwind: "text-cyan-400",
-    bgTailwind: "bg-cyan-400/20",
-    borderTailwind: "border-cyan-400",
-  },
-  [CODING_AGENT_TOOL_IDS.GEMINI_CLI]: {
-    hex: "#d53f8c",
-    tailwind: "text-pink-500",
-    bgTailwind: "bg-pink-500/20",
-    borderTailwind: "border-pink-500",
-  },
-  [CODING_AGENT_TOOL_IDS.OPENCODE]: {
-    hex: "#48bb78",
-    tailwind: "text-green-400",
-    bgTailwind: "bg-green-400/20",
-    borderTailwind: "border-green-400",
-  },
-} as const;
-
-/**
- * Default color for unknown/custom agents
- */
-export const DEFAULT_AGENT_COLOR = {
-  hex: "#a0aec0",
-  tailwind: "text-gray-400",
-  bgTailwind: "bg-gray-400/20",
-  borderTailwind: "border-gray-400",
-};
-
-/**
- * Get Tailwind CSS text color class for a coding agent
- *
- * @param toolId - The tool ID (e.g., "claude-code", "codex-cli")
- * @returns Tailwind CSS class name
- */
-export function getAgentTailwindClass(toolId?: string | null): string {
-  if (!toolId) {
-    return DEFAULT_AGENT_COLOR.tailwind;
-  }
-
-  const color = CODING_AGENT_COLORS[toolId as keyof typeof CODING_AGENT_COLORS];
-  return color?.tailwind ?? DEFAULT_AGENT_COLOR.tailwind;
-}
-
-/**
- * Get Tailwind CSS background color class for a coding agent
- *
- * @param toolId - The tool ID (e.g., "claude-code", "codex-cli")
- * @returns Tailwind CSS class name for background
- */
-export function getAgentBgTailwindClass(toolId?: string | null): string {
-  if (!toolId) {
-    return DEFAULT_AGENT_COLOR.bgTailwind;
-  }
-
-  const color = CODING_AGENT_COLORS[toolId as keyof typeof CODING_AGENT_COLORS];
-  return color?.bgTailwind ?? DEFAULT_AGENT_COLOR.bgTailwind;
-}
-
-/**
- * Get hex color for a coding agent
- *
- * @param toolId - The tool ID (e.g., "claude-code", "codex-cli")
- * @returns Hex color string
- */
-export function getAgentHexColor(toolId?: string | null): string {
-  if (!toolId) {
-    return DEFAULT_AGENT_COLOR.hex;
-  }
-
-  const color = CODING_AGENT_COLORS[toolId as keyof typeof CODING_AGENT_COLORS];
-  return color?.hex ?? DEFAULT_AGENT_COLOR.hex;
-}
-
-/**
- * Normalize agent type string to tool ID
- * Handles various naming conventions used across the codebase
- *
- * @param agentType - Agent type string (e.g., "claude", "codex-cli", "Claude Code")
- * @returns Normalized tool ID
- */
-export function normalizeAgentToToolId(
-  agentType?: string | null,
-): string | null {
-  if (!agentType) return null;
-
-  const normalized = agentType.toLowerCase().trim();
-
-  // Direct matches
-  if (normalized === "claude-code" || normalized === "claude") {
-    return CODING_AGENT_TOOL_IDS.CLAUDE_CODE;
-  }
-  if (normalized === "codex-cli" || normalized === "codex") {
-    return CODING_AGENT_TOOL_IDS.CODEX_CLI;
-  }
-  if (normalized === "gemini-cli" || normalized === "gemini") {
-    return CODING_AGENT_TOOL_IDS.GEMINI_CLI;
-  }
-  if (normalized === "opencode" || normalized === "open-code") {
-    return CODING_AGENT_TOOL_IDS.OPENCODE;
-  }
-
-  // Label-based matches
-  if (normalized.includes("claude")) {
-    return CODING_AGENT_TOOL_IDS.CLAUDE_CODE;
-  }
-  if (normalized.includes("codex")) {
-    return CODING_AGENT_TOOL_IDS.CODEX_CLI;
-  }
-  if (normalized.includes("gemini")) {
-    return CODING_AGENT_TOOL_IDS.GEMINI_CLI;
-  }
-  if (normalized.includes("opencode")) {
-    return CODING_AGENT_TOOL_IDS.OPENCODE;
-  }
-
-  return agentType; // Return as-is for custom agents
-}

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

@@ -1,10 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-/**
- * Combines class names with Tailwind CSS merge support.
- * Handles conditional classes and resolves Tailwind conflicts.
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}