@akiojin/gwt 4.2.0 → 4.3.1

package/src/services/aiToolResolver.ts

@@ -1,12 +1,16 @@
 import { execa } from "execa";
 import { platform } from "os";
 import { getToolById } from "../config/tools.js";
+import { CLAUDE_CODE_TOOL } from "../config/builtin-tools.js";
 import {
   CODEX_DEFAULT_ARGS,
   CLAUDE_PERMISSION_SKIP_ARGS,
 } from "../shared/aiToolConstants.js";
 import { prepareCustomToolExecution } from "./customToolResolver.js";
 import type { LaunchOptions } from "../types/tools.js";
+import { createLogger } from "../logging/logger.js";
+
+const logger = createLogger({ category: "resolver" });
 
 const DETECTION_COMMAND = platform() === "win32" ? "where" : "which";
 const MIN_BUN_MAJOR = 1;
@@ -41,12 +45,32 @@ export class AIToolResolutionError extends Error {
 async function commandExists(command: string): Promise<boolean> {
   try {
     await execa(DETECTION_COMMAND, [command], { shell: true });
+    logger.debug({ command, exists: true }, "Command check");
     return true;
   } catch {
+    logger.debug({ command, exists: false }, "Command check");
     return false;
   }
 }
 
+/**
+ * コマンドのフルパスを取得
+ * node-ptyはシェルを経由しないため、フルパスが必要
+ */
+async function resolveCommandPath(command: string): Promise<string | null> {
+  try {
+    const { stdout } = await execa(DETECTION_COMMAND, [command], {
+      shell: true,
+    });
+    const fullPath = stdout.trim().split("\n")[0];
+    logger.debug({ command, fullPath }, "Command path resolved");
+    return fullPath || null;
+  } catch {
+    logger.debug({ command, fullPath: null }, "Command path resolution failed");
+    return null;
+  }
+}
+
 let bunxCheckPromise: Promise<void> | null = null;
 
 async function ensureBunxAvailable(): Promise<void> {
@@ -67,6 +91,7 @@ async function ensureBunxAvailable(): Promise<void> {
       try {
         const { stdout } = await execa("bun", ["--version"]);
         const version = stdout.trim();
+        logger.debug({ bunVersion: version }, "Bun version detected");
         const major = parseInt(version.split(".")[0] ?? "0", 10);
         if (!Number.isFinite(major) || major < MIN_BUN_MAJOR) {
           throw new AIToolResolutionError(
@@ -144,20 +169,40 @@ export async function resolveClaudeCommand(
   options: ClaudeCommandOptions = {},
 ): Promise<ResolvedCommand> {
   const args = buildClaudeArgs(options);
-
-  if (await commandExists("claude")) {
+  const envOverrides = CLAUDE_CODE_TOOL.env
+    ? { env: { ...CLAUDE_CODE_TOOL.env } as NodeJS.ProcessEnv }
+    : {};
+
+  // フルパスを取得（node-ptyはシェルを経由しないため必要）
+  const claudePath = await resolveCommandPath("claude");
+  if (claudePath) {
+    logger.info(
+      { command: claudePath, usesFallback: false },
+      "Claude command resolved",
+    );
     return {
-      command: "claude",
+      command: claudePath,
       args,
       usesFallback: false,
+      ...envOverrides,
     };
   }
 
-  await ensureBunxAvailable();
+  // bunxへフォールバック
+  const bunxPath = await resolveCommandPath("bunx");
+  if (!bunxPath) {
+    await ensureBunxAvailable(); // エラーをスローする
+  }
+
+  logger.info(
+    { command: bunxPath ?? "bunx", usesFallback: true },
+    "Claude command resolved (fallback)",
+  );
   return {
-    command: "bunx",
+    command: bunxPath ?? "bunx",
     args: [CLAUDE_CLI_PACKAGE, ...args],
     usesFallback: true,
+    ...envOverrides,
   };
 }
 
@@ -198,17 +243,32 @@ export async function resolveCodexCommand(
 ): Promise<ResolvedCommand> {
   const args = buildCodexArgs(options);
 
-  if (await commandExists("codex")) {
+  // フルパスを取得（node-ptyはシェルを経由しないため必要）
+  const codexPath = await resolveCommandPath("codex");
+  if (codexPath) {
+    logger.info(
+      { command: codexPath, usesFallback: false },
+      "Codex command resolved",
+    );
     return {
-      command: "codex",
+      command: codexPath,
       args,
       usesFallback: false,
     };
   }
 
-  await ensureBunxAvailable();
+  // bunxへフォールバック
+  const bunxPath = await resolveCommandPath("bunx");
+  if (!bunxPath) {
+    await ensureBunxAvailable(); // エラーをスローする
+  }
+
+  logger.info(
+    { command: bunxPath ?? "bunx", usesFallback: true },
+    "Codex command resolved (fallback)",
+  );
   return {
-    command: "bunx",
+    command: bunxPath ?? "bunx",
     args: [CODEX_CLI_PACKAGE, ...args],
     usesFallback: true,
   };
@@ -223,6 +283,7 @@ export async function resolveCustomToolCommand(
 ): Promise<ResolvedCommand> {
   const tool = await getToolById(options.toolId);
   if (!tool) {
+    logger.error({ toolId: options.toolId }, "Custom tool not found");
     throw new AIToolResolutionError(
       "CUSTOM_TOOL_NOT_FOUND",
       `Custom tool not found: ${options.toolId}`,
@@ -235,6 +296,11 @@ export async function resolveCustomToolCommand(
 
   const execution = await prepareCustomToolExecution(tool, options);
 
+  logger.info(
+    { toolId: options.toolId, command: execution.command },
+    "Custom tool command resolved",
+  );
+
   return {
     command: execution.command,
     args: execution.args,

package/src/services/customToolResolver.ts

@@ -1,5 +1,8 @@
 import { execa } from "execa";
 import type { CustomAITool, LaunchOptions } from "../types/tools.js";
+import { createLogger } from "../logging/logger.js";
+
+const logger = createLogger({ category: "custom-resolver" });
 
 export interface CustomToolExecutionPlan {
   command: string;
@@ -21,6 +24,7 @@ export async function resolveCommandPath(commandName: string): Promise<string> {
       );
     }
 
+    logger.debug({ commandName, resolvedPath }, "Command path resolved");
     return resolvedPath;
   } catch (error) {
     const reason = error instanceof Error ? error.message : String(error);
@@ -55,6 +59,10 @@ export function buildCustomToolArgs(
     args.push(...options.extraArgs);
   }
 
+  logger.debug(
+    { toolId: tool.id, argsCount: args.length },
+    "Custom tool args built",
+  );
   return args;
 }
 
@@ -62,37 +70,44 @@ export async function prepareCustomToolExecution(
   tool: CustomAITool,
   options: LaunchOptions = {},
 ): Promise<CustomToolExecutionPlan> {
-  const args = buildCustomToolArgs(tool, options);
+  const baseArgs = buildCustomToolArgs(tool, options);
   const envOverrides: NodeJS.ProcessEnv | undefined = tool.env
     ? ({ ...tool.env } as NodeJS.ProcessEnv)
     : undefined;
 
+  let command: string;
+  let args: string[];
+
   switch (tool.type) {
     case "path": {
-      return {
-        command: tool.command,
-        args,
-        ...(envOverrides ? { env: envOverrides } : {}),
-      };
+      command = tool.command;
+      args = baseArgs;
+      break;
     }
     case "bunx": {
-      return {
-        command: "bunx",
-        args: [tool.command, ...args],
-        ...(envOverrides ? { env: envOverrides } : {}),
-      };
+      command = "bunx";
+      args = [tool.command, ...baseArgs];
+      break;
     }
     case "command": {
-      const resolved = await resolveCommandPath(tool.command);
-      return {
-        command: resolved,
-        args,
-        ...(envOverrides ? { env: envOverrides } : {}),
-      };
+      command = await resolveCommandPath(tool.command);
+      args = baseArgs;
+      break;
     }
     default: {
       const exhaustive: never = tool.type;
       throw new Error(`Unknown custom tool type: ${exhaustive as string}`);
     }
   }
+
+  logger.debug(
+    { toolId: tool.id, toolType: tool.type, command, hasEnv: !!envOverrides },
+    "Custom tool execution prepared",
+  );
+
+  return {
+    command,
+    args,
+    ...(envOverrides ? { env: envOverrides } : {}),
+  };
 }

package/src/utils/webui.ts

@@ -2,7 +2,7 @@ import * as net from "node:net";
 
 export function resolveWebUiPort(
   portEnv: string | undefined = process.env.PORT,
-  defaultPort = 3000,
+  defaultPort = 3001,
 ): number {
   if (!portEnv) {
     return defaultPort;

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

@@ -1,89 +1,31 @@
-import React, { useMemo } from "react";
-import { Link } from "react-router-dom";
+/**
+ * ブランチグラフ - シナプス風ビジュアライゼーション
+ *
+ * React Flow + D3-forceによるインタラクティブなブランチ関係図
+ */
+
+import React, { useState, useCallback } from "react";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
 import type { Branch } from "../../../../types/api.js";
-
-const UNKNOWN_BASE = "__unknown__";
-
-interface Lane {
-  id: string;
-  baseLabel: string;
-  baseNode: Branch | null;
-  nodes: Branch[];
-  isSyntheticBase: boolean;
-}
+import { SynapticCanvas, BranchDetailPanel } from "./graph";
 
 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;
+  const [selectedBranch, setSelectedBranch] = useState<Branch | null>(null);
 
-      if (!branch.baseBranch && referencedBases.has(branch.name)) {
-        return;
-      }
+  const handleNodeClick = useCallback((branch: Branch | null) => {
+    setSelectedBranch(branch);
+  }, []);
 
-      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,
-        });
-      }
+  const handlePanelClose = useCallback(() => {
+    setSelectedBranch(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) {
+  if (!branches.length) {
     return (
       <Card className="border-dashed">
         <CardContent className="flex flex-col items-center justify-center py-12 text-center">
@@ -99,154 +41,55 @@ export function BranchGraph({ branches }: BranchGraphProps) {
   }
 
   return (
-    <Card>
+    <Card className="relative overflow-hidden">
       <CardHeader className="pb-4">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div>
             <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
-              BRANCH GRAPH
+              SYNAPTIC GRAPH
             </p>
-            <h2 className="mt-1 text-lg font-semibold">
-              ベースブランチの関係をグラフィカルに把握
-            </h2>
+            <h2 className="mt-1 text-lg font-semibold">ブランチネットワーク</h2>
             <p className="mt-1 text-sm text-muted-foreground">
-              baseRef、Git
-              upstream、merge-baseヒューリスティクスを用いて推定したベースブランチ単位で派生ノードをレーン表示します。
+              クリックでノードを展開・詳細表示。ドラッグで移動、スクロールでズーム。
             </p>
           </div>
           <div className="flex flex-wrap gap-2">
-            <Badge variant="outline">Base</Badge>
-            <Badge variant="local">Local</Badge>
-            <Badge variant="remote">Remote</Badge>
-            <Badge variant="success">Worktree</Badge>
+            <Badge variant="outline" className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full bg-muted-foreground/30" />
+              Cluster
+            </Badge>
+            <Badge variant="local" className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full bg-local" />
+              Local
+            </Badge>
+            <Badge variant="remote" className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full bg-remote" />
+              Remote
+            </Badge>
+            <Badge variant="success" className="flex items-center gap-1">
+              <span className="h-2 w-2 rounded-full bg-success" />
+              Worktree
+            </Badge>
           </div>
         </div>
       </CardHeader>
 
-      <CardContent className="space-y-4">
-        {lanes.map((lane) => (
-          <article key={lane.id} className="rounded-lg border bg-muted/30 p-4">
-            <div className="mb-3 flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="font-semibold">{lane.baseLabel}</span>
-                {lane.baseNode && (
-                  <Badge
-                    variant={
-                      lane.baseNode.type === "local" ? "local" : "remote"
-                    }
-                    className="text-xs"
-                  >
-                    {lane.baseNode.type === "local" ? "LOCAL" : "REMOTE"}
-                  </Badge>
-                )}
-                {lane.isSyntheticBase && (
-                  <Badge
-                    variant="outline"
-                    className="text-xs text-muted-foreground"
-                  >
-                    推定のみ
-                  </Badge>
-                )}
-              </div>
-              <span className="text-sm text-muted-foreground">
-                {lane.nodes.length} branch{lane.nodes.length > 1 ? "es" : ""}
-              </span>
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              {renderBaseNode(lane)}
-              {lane.nodes.map((branch) => (
-                <BranchNode key={branch.name} branch={branch} />
-              ))}
-            </div>
-          </article>
-        ))}
+      <CardContent className="relative p-0">
+        {/* キャンバスコンテナ */}
+        <div className="relative h-[500px] w-full">
+          <SynapticCanvas
+            branches={branches}
+            onNodeClick={handleNodeClick}
+            className="h-full w-full"
+          />
+
+          {/* 詳細パネル */}
+          <BranchDetailPanel
+            branch={selectedBranch}
+            onClose={handlePanelClose}
+          />
+        </div>
       </CardContent>
     </Card>
   );
 }
-
-function renderBaseNode(lane: Lane) {
-  const label =
-    lane.baseLabel === "ベース不明" ? "Unknown base" : lane.baseLabel;
-
-  const content = (
-    <div
-      className={cn(
-        "group relative rounded-md border bg-card px-3 py-2 transition-colors hover:border-muted-foreground/50",
-        lane.baseNode?.type === "local" && "border-l-2 border-l-local",
-        lane.baseNode?.type === "remote" && "border-l-2 border-l-remote",
-      )}
-    >
-      <span className="block truncate text-sm font-medium">{label}</span>
-      <span className="text-xs text-muted-foreground">BASE</span>
-
-      {/* Tooltip */}
-      <div className="invisible absolute bottom-full left-0 z-10 mb-2 w-48 rounded-md border bg-popover p-2 text-xs shadow-md group-hover:visible">
-        <p className="font-medium">{label}</p>
-        <p className="text-muted-foreground">
-          {lane.baseNode
-            ? `type: ${lane.baseNode.type}`
-            : "推定されたベースブランチ"}
-        </p>
-      </div>
-    </div>
-  );
-
-  if (lane.baseNode) {
-    return (
-      <Link
-        key={`base-${lane.id}`}
-        to={`/${encodeURIComponent(lane.baseNode.name)}`}
-        className="block"
-        aria-label={`ベースブランチ ${lane.baseNode.name} を開く`}
-      >
-        {content}
-      </Link>
-    );
-  }
-
-  return <div key={`base-${lane.id}`}>{content}</div>;
-}
-
-function BranchNode({ branch }: { branch: Branch }) {
-  const node = (
-    <div
-      className={cn(
-        "group relative rounded-md border bg-card px-3 py-2 transition-colors hover:border-muted-foreground/50",
-        branch.type === "local" && "border-l-2 border-l-local",
-        branch.type === "remote" && "border-l-2 border-l-remote",
-        branch.mergeStatus === "merged" && "opacity-60",
-      )}
-    >
-      <span className="block truncate text-sm font-medium">
-        {formatBranchLabel(branch)}
-      </span>
-      <span className="text-xs text-muted-foreground">
-        {branch.worktreePath ? "Worktree" : "No Worktree"}
-      </span>
-
-      {/* Tooltip */}
-      <div className="invisible absolute bottom-full left-0 z-10 mb-2 w-56 rounded-md border bg-popover p-2 text-xs shadow-md group-hover:visible">
-        <p className="font-medium">{branch.name}</p>
-        <p className="text-muted-foreground">
-          base: {branch.baseBranch ?? "unknown"}
-        </p>
-        <p className="text-muted-foreground">{getDivergenceLabel(branch)}</p>
-        <p className="text-muted-foreground">
-          {branch.worktreePath ?? "Worktree未作成"}
-        </p>
-      </div>
-    </div>
-  );
-
-  return (
-    <Link
-      to={`/${encodeURIComponent(branch.name)}`}
-      className="block"
-      aria-label={`${branch.name} の詳細を開く`}
-    >
-      {node}
-    </Link>
-  );
-}