@akiojin/gwt 2.0.0

package/src/utils/terminal.ts

@@ -0,0 +1,272 @@
+import fs from "node:fs";
+import { platform } from "node:os";
+import { ReadStream, WriteStream } from "node:tty";
+
+export interface TerminalStreams {
+  stdin: NodeJS.ReadStream;
+  stdout: NodeJS.WriteStream;
+  stderr: NodeJS.WriteStream;
+  stdinFd?: number;
+  stdoutFd?: number;
+  stderrFd?: number;
+  usingFallback: boolean;
+  exitRawMode: () => void;
+}
+
+const DEV_TTY_PATH = "/dev/tty";
+
+let cachedStreams: TerminalStreams | null = null;
+
+export interface ChildStdio {
+  stdin: "inherit" | number;
+  stdout: "inherit" | number;
+  stderr: "inherit" | number;
+  cleanup: () => void;
+}
+
+const DEFAULT_ACK_MESSAGE =
+  "Review the error details, then press Enter to continue...";
+
+function isProcessTTY(): boolean {
+  return Boolean(
+    process.stdin.isTTY &&
+      process.stdout.isTTY &&
+      process.stderr.isTTY &&
+      typeof (process.stdin as NodeJS.ReadStream).setRawMode === "function",
+  );
+}
+
+function createTerminalStreams(): TerminalStreams {
+  if (isProcessTTY()) {
+    const exitRawMode = () => {
+      const stream = process.stdin as NodeJS.ReadStream;
+      if (typeof stream.setRawMode === "function") {
+        try {
+          stream.setRawMode(false);
+        } catch {
+          // Ignore errors when resetting raw mode.
+        }
+      }
+    };
+
+    return {
+      stdin: process.stdin,
+      stdout: process.stdout,
+      stderr: process.stderr,
+      usingFallback: false,
+      exitRawMode,
+    };
+  }
+
+  // Windows では /dev/tty が利用できないため、そのまま返す。
+  if (platform() === "win32") {
+    return {
+      stdin: process.stdin,
+      stdout: process.stdout,
+      stderr: process.stderr,
+      usingFallback: false,
+      exitRawMode: () => {
+        const stream = process.stdin as NodeJS.ReadStream;
+        if (typeof stream.setRawMode === "function") {
+          try {
+            stream.setRawMode(false);
+          } catch {
+            // Ignore errors when resetting raw mode.
+          }
+        }
+      },
+    };
+  }
+
+  try {
+    const fdIn = fs.openSync(DEV_TTY_PATH, "r");
+    const fdOut = fs.openSync(DEV_TTY_PATH, "w");
+    const fdErr = fs.openSync(DEV_TTY_PATH, "w");
+
+    const stdin = new ReadStream(fdIn);
+    const stdout = new WriteStream(fdOut);
+    const stderr = new WriteStream(fdErr);
+
+    const exitRawMode = () => {
+      if (typeof stdin.setRawMode === "function") {
+        try {
+          stdin.setRawMode(false);
+        } catch {
+          // Ignore errors when resetting raw mode.
+        }
+      }
+    };
+
+    const cleanup = () => {
+      exitRawMode();
+      try {
+        stdin.destroy();
+      } catch {
+        // Ignore stdin destroy errors.
+      }
+      try {
+        stdout.destroy();
+      } catch {
+        // Ignore stdout destroy errors.
+      }
+      try {
+        stderr.destroy();
+      } catch {
+        // Ignore stderr destroy errors.
+      }
+      try {
+        fs.closeSync(fdIn);
+      } catch {
+        // Ignore close errors.
+      }
+      try {
+        fs.closeSync(fdOut);
+      } catch {
+        // Ignore close errors.
+      }
+      try {
+        fs.closeSync(fdErr);
+      } catch {
+        // Ignore close errors.
+      }
+    };
+
+    process.once("exit", cleanup);
+
+    return {
+      stdin,
+      stdout,
+      stderr,
+      stdinFd: fdIn,
+      stdoutFd: fdOut,
+      stderrFd: fdErr,
+      usingFallback: true,
+      exitRawMode,
+    };
+  } catch {
+    const exitRawMode = () => {
+      const stream = process.stdin as NodeJS.ReadStream;
+      if (typeof stream.setRawMode === "function") {
+        try {
+          stream.setRawMode(false);
+        } catch {
+          // Ignore errors when resetting raw mode.
+        }
+      }
+    };
+
+    return {
+      stdin: process.stdin,
+      stdout: process.stdout,
+      stderr: process.stderr,
+      usingFallback: false,
+      exitRawMode,
+    };
+  }
+}
+
+export function getTerminalStreams(): TerminalStreams {
+  if (!cachedStreams) {
+    cachedStreams = createTerminalStreams();
+  }
+  return cachedStreams;
+}
+
+export function createChildStdio(): ChildStdio {
+  const terminal = getTerminalStreams();
+
+  if (!terminal.usingFallback) {
+    return {
+      stdin: "inherit",
+      stdout: "inherit",
+      stderr: "inherit",
+      cleanup: () => {},
+    };
+  }
+
+  let fdIn: number | null = null;
+  let fdOut: number | null = null;
+  let fdErr: number | null = null;
+
+  const cleanup = () => {
+    for (const fd of [fdIn, fdOut, fdErr]) {
+      if (fd !== null) {
+        try {
+          fs.closeSync(fd);
+        } catch {
+          // Ignore close errors.
+        }
+      }
+    }
+  };
+
+  try {
+    fdIn = fs.openSync(DEV_TTY_PATH, "r");
+    fdOut = fs.openSync(DEV_TTY_PATH, "w");
+    fdErr = fs.openSync(DEV_TTY_PATH, "w");
+
+    return {
+      stdin: fdIn,
+      stdout: fdOut,
+      stderr: fdErr,
+      cleanup,
+    };
+  } catch {
+    cleanup();
+    return {
+      stdin: "inherit",
+      stdout: "inherit",
+      stderr: "inherit",
+      cleanup: () => {},
+    };
+  }
+}
+
+function isInteractive(stream: NodeJS.ReadStream): boolean {
+  return Boolean(stream.isTTY);
+}
+
+export async function waitForUserAcknowledgement(
+  message: string = DEFAULT_ACK_MESSAGE,
+): Promise<void> {
+  const terminal = getTerminalStreams();
+  const stdin = terminal.stdin as NodeJS.ReadStream;
+  const stdout = terminal.stdout as NodeJS.WriteStream;
+
+  if (!stdin || typeof stdin.on !== "function") {
+    return;
+  }
+
+  if (!isInteractive(stdin)) {
+    return;
+  }
+
+  terminal.exitRawMode();
+
+  await new Promise<void>((resolve) => {
+    const cleanup = () => {
+      stdin.removeListener("data", onData);
+      if (typeof stdin.pause === "function") {
+        stdin.pause();
+      }
+    };
+
+    const onData = (chunk: Buffer | string) => {
+      const data = typeof chunk === "string" ? chunk : chunk.toString("utf8");
+      if (data.includes("\n") || data.includes("\r")) {
+        cleanup();
+        resolve();
+      }
+    };
+
+    if (typeof stdout?.write === "function") {
+      stdout.write(`\n${message}\n`);
+    }
+
+    if (typeof stdin.resume === "function") {
+      stdin.resume();
+    }
+
+    stdin.on("data", onData);
+  });
+}

package/src/utils.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { getPackageVersion } from "./utils";
+import { readFile } from "fs/promises";
+import path from "node:path";
+
+describe("getPackageVersion", () => {
+  it("正常系: package.jsonが存在し、versionフィールドがある場合、バージョンを返す", async () => {
+    const version = await getPackageVersion();
+
+    // バージョンが取得できることを確認
+    expect(version).not.toBeNull();
+    expect(typeof version).toBe("string");
+
+    // セマンティックバージョニング形式かチェック（基本形式）
+    if (version) {
+      expect(version).toMatch(/^\d+\.\d+\.\d+/);
+    }
+  });
+
+  it("正常系: 取得したバージョンがpackage.jsonのversionと一致する", async () => {
+    const version = await getPackageVersion();
+
+    // package.jsonから直接読み取ってバージョンを確認
+    const packageJsonContent = await readFile(
+      path.resolve(process.cwd(), "package.json"),
+      "utf-8",
+    );
+    const packageJson = JSON.parse(packageJsonContent);
+
+    expect(version).toBe(packageJson.version);
+  });
+
+  it("正常系: プレリリースバージョンも正しく取得できる", async () => {
+    // 注: このテストは実際のpackage.jsonのバージョンがプレリリース形式の場合にパスする
+    // 現在のバージョンが通常バージョンの場合、このテストはスキップされる
+    const version = await getPackageVersion();
+
+    if (version && version.includes("-")) {
+      // プレリリース識別子を含むバージョン（例: "2.0.0-beta.1"）
+      expect(version).toMatch(/^\d+\.\d+\.\d+-[a-zA-Z0-9.-]+/);
+    }
+  });
+});

package/src/utils.ts

@@ -0,0 +1,60 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { access, readFile } from "fs/promises";
+import { existsSync } from "fs";
+export function getCurrentDirname(): string {
+  return path.dirname(fileURLToPath(import.meta.url));
+}
+
+export class AppError extends Error {
+  constructor(
+    message: string,
+    public cause?: unknown,
+  ) {
+    super(message);
+    this.name = "AppError";
+  }
+}
+
+export function setupExitHandlers(): void {
+  // Handle Ctrl+C gracefully
+  process.on("SIGINT", () => {
+    console.log("\n\n👋 Goodbye!");
+    process.exit(0);
+  });
+
+  // Handle other termination signals
+  process.on("SIGTERM", () => {
+    console.log("\n\n👋 Goodbye!");
+    process.exit(0);
+  });
+}
+
+export function handleUserCancel(error: unknown): never {
+  if (error && typeof error === "object" && "name" in error) {
+    if (error.name === "ExitPromptError" || error.name === "AbortPromptError") {
+      console.log("\n\n👋 Operation cancelled. Goodbye!");
+      process.exit(0);
+    }
+  }
+  throw error;
+}
+
+interface PackageJson {
+  version: string;
+  name?: string;
+}
+
+export async function getPackageVersion(): Promise<string | null> {
+  try {
+    const currentDir = getCurrentDirname();
+    const packageJsonPath = path.resolve(currentDir, "..", "package.json");
+
+    const packageJsonContent = await readFile(packageJsonPath, "utf-8");
+    const packageJson: PackageJson = JSON.parse(packageJsonContent);
+
+    return packageJson.version || null;
+  } catch {
+    return null;
+  }
+}

package/src/web/client/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>gwt - Web UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,231 @@
+import React, { useMemo } from "react";
+import { Link } from "react-router-dom";
+import type { Branch } from "../../../../types/api.js";
+
+const UNKNOWN_BASE = "__unknown__";
+
+interface Lane {
+  id: string;
+  baseLabel: string;
+  baseNode: Branch | null;
+  nodes: Branch[];
+  isSyntheticBase: boolean;
+}
+
+interface BranchGraphProps {
+  branches: Branch[];
+}
+
+function formatBranchLabel(branch: Branch): string {
+  return branch.name.length > 32
+    ? `${branch.name.slice(0, 29)}...`
+    : branch.name;
+}
+
+function getDivergenceLabel(branch: Branch): string {
+  if (!branch.divergence) {
+    return "divergence: n/a";
+  }
+  const { ahead, behind, upToDate } = branch.divergence;
+  if (upToDate) {
+    return "divergence: up-to-date";
+  }
+  return `divergence: +${ahead} / -${behind}`;
+}
+
+export function BranchGraph({ branches }: BranchGraphProps) {
+  const branchMap = useMemo(() => {
+    return new Map(branches.map((branch) => [branch.name, branch]));
+  }, [branches]);
+
+  const referencedBases = useMemo(() => {
+    const baseSet = new Set<string>();
+    branches.forEach((branch) => {
+      if (branch.baseBranch) {
+        baseSet.add(branch.baseBranch);
+      }
+    });
+    return baseSet;
+  }, [branches]);
+
+  const lanes = useMemo<Lane[]>(() => {
+    const laneMap = new Map<string, Lane>();
+
+    branches.forEach((branch) => {
+      const base = branch.baseBranch ?? UNKNOWN_BASE;
+
+      if (!branch.baseBranch && referencedBases.has(branch.name)) {
+        // ベースとして参照されている場合は、グラフ上で基点ノードとしてのみ表示
+        return;
+      }
+
+      if (!laneMap.has(base)) {
+        const baseNode =
+          base !== UNKNOWN_BASE ? branchMap.get(base) ?? null : null;
+        laneMap.set(base, {
+          id: base,
+          baseLabel: base === UNKNOWN_BASE ? "ベース不明" : base,
+          baseNode,
+          nodes: [],
+          isSyntheticBase: baseNode === null,
+        });
+      }
+
+      laneMap.get(base)!.nodes.push(branch);
+    });
+
+    return Array.from(laneMap.values()).sort((a, b) => {
+      if (a.id === UNKNOWN_BASE) {
+        return 1;
+      }
+      if (b.id === UNKNOWN_BASE) {
+        return -1;
+      }
+      return a.baseLabel.localeCompare(b.baseLabel, "ja");
+    });
+  }, [branches, branchMap, referencedBases]);
+
+  if (!lanes.length) {
+    return (
+      <section className="branch-graph-panel">
+        <div className="branch-graph-panel__empty">
+          <p>グラフ表示できるブランチがありません。</p>
+          <p>fetch済みのブランチやWorktreeを追加すると関係図が表示されます。</p>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="branch-graph-panel">
+      <header className="branch-graph-panel__header">
+        <div>
+          <p className="branch-graph-panel__eyebrow">BRANCH GRAPH</p>
+          <h2>ベースブランチの関係をグラフィカルに把握</h2>
+          <p>
+            baseRef、Git upstream、merge-baseヒューリスティクスを用いて推定したベースブランチ単位で
+            派生ノードをレーン表示します。
+          </p>
+        </div>
+        <div className="branch-graph-panel__legend">
+          <span className="graph-chip graph-chip--base">Base</span>
+          <span className="graph-chip graph-chip--local">Local</span>
+          <span className="graph-chip graph-chip--remote">Remote</span>
+          <span className="graph-chip graph-chip--worktree">Worktree</span>
+        </div>
+      </header>
+
+      <div className="branch-graph">
+        {lanes.map((lane) => (
+          <article className="branch-graph__lane" key={lane.id}>
+            <div className="branch-graph__lane-heading">
+              <p className="branch-graph__lane-label">
+                {lane.baseLabel}
+                {lane.baseNode && (
+                  <span className="branch-graph__lane-meta">
+                    {lane.baseNode.type === "local" ? "LOCAL" : "REMOTE"}
+                  </span>
+                )}
+                {lane.isSyntheticBase && (
+                  <span className="branch-graph__lane-meta lane-meta--muted">
+                    推定のみ
+                  </span>
+                )}
+              </p>
+              <span className="branch-graph__lane-count">
+                {lane.nodes.length} branch
+                {lane.nodes.length > 1 ? "es" : ""}
+              </span>
+            </div>
+
+            <div className="branch-graph__track">
+              {renderBaseNode(lane)}
+              {lane.nodes.map((branch) => (
+                <BranchNode key={branch.name} branch={branch} />
+              ))}
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function renderBaseNode(lane: Lane) {
+  const label =
+    lane.baseLabel === "ベース不明" ? "Unknown base" : lane.baseLabel;
+  const content = (
+    <div
+      className={`branch-graph__node branch-graph__node--base ${
+        lane.baseNode ? `branch-graph__node--${lane.baseNode.type}` : ""
+      }`}
+    >
+      <span className="branch-graph__node-label">{label}</span>
+      <span className="branch-graph__node-meta">BASE</span>
+      <div className="branch-graph__tooltip">
+        <p>{label}</p>
+        <p>
+          {lane.baseNode
+            ? `type: ${lane.baseNode.type}`
+            : "推定されたベースブランチ"}
+        </p>
+      </div>
+    </div>
+  );
+
+  if (lane.baseNode) {
+    return (
+      <Link
+        key={`base-${lane.id}`}
+        to={`/${encodeURIComponent(lane.baseNode.name)}`}
+        className="branch-graph__node-link"
+        aria-label={`ベースブランチ ${lane.baseNode.name} を開く`}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <div key={`base-${lane.id}`} className="branch-graph__node-link">
+      {content}
+    </div>
+  );
+}
+
+function BranchNode({ branch }: { branch: Branch }) {
+  const node = (
+    <div
+      className={`branch-graph__node branch-graph__node--${branch.type} ${
+        branch.mergeStatus === "merged"
+          ? "branch-graph__node--merged"
+          : branch.mergeStatus === "unmerged"
+            ? "branch-graph__node--active"
+            : ""
+      }`}
+    >
+      <span className="branch-graph__node-label">
+        {formatBranchLabel(branch)}
+      </span>
+      <span className="branch-graph__node-meta">
+        {branch.worktreePath ? "Worktree" : "No Worktree"}
+      </span>
+      <div className="branch-graph__tooltip">
+        <p>{branch.name}</p>
+        <p>base: {branch.baseBranch ?? "unknown"}</p>
+        <p>{getDivergenceLabel(branch)}</p>
+        <p>{branch.worktreePath ?? "Worktree未作成"}</p>
+      </div>
+    </div>
+  );
+
+  return (
+    <Link
+      to={`/${encodeURIComponent(branch.name)}`}
+      className="branch-graph__node-link"
+      aria-label={`${branch.name} の詳細を開く`}
+    >
+      {node}
+    </Link>
+  );
+}