@akiojin/gwt 4.9.1 → 4.11.6

package/src/cli/ui/stores/uiStore.ts

@@ -0,0 +1,226 @@
+/**
+ * UI Store - UI state management for SolidJS
+ *
+ * This store manages UI-level concerns like notifications, terminal size,
+ * loading states, and modal dialogs.
+ *
+ * @see specs/SPEC-d27be71b/spec.md - OpenTUI migration spec
+ */
+
+import { createRoot } from "solid-js";
+import { createStore } from "solid-js/store";
+import type {
+  Notification,
+  NotificationTone,
+  TerminalSize,
+  LoadingState,
+} from "../core/types.js";
+
+// ========================================
+// Types
+// ========================================
+
+export interface UIStoreState {
+  /** Current notification */
+  notification: Notification | null;
+  /** Terminal dimensions */
+  terminalSize: TerminalSize;
+  /** Global loading state */
+  loading: LoadingState;
+  /** Is search mode active */
+  searchMode: boolean;
+  /** Is confirm dialog visible */
+  confirmDialogVisible: boolean;
+  /** Confirm dialog message */
+  confirmDialogMessage: string;
+}
+
+// ========================================
+// Initial State
+// ========================================
+
+const initialState: UIStoreState = {
+  notification: null,
+  terminalSize: { width: 80, height: 24 },
+  loading: { isLoading: false },
+  searchMode: false,
+  confirmDialogVisible: false,
+  confirmDialogMessage: "",
+};
+
+// ========================================
+// Store Creation
+// ========================================
+
+function createUIStore() {
+  const [state, setState] = createStore<UIStoreState>(initialState);
+
+  // Notification timeout handle
+  let notificationTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const actions = {
+    /**
+     * Show a notification
+     */
+    showNotification(
+      message: string,
+      tone: NotificationTone = "info",
+      duration = 3000,
+    ): void {
+      // Clear existing timeout
+      if (notificationTimeout) {
+        clearTimeout(notificationTimeout);
+      }
+
+      setState("notification", {
+        message,
+        tone,
+        timestamp: new Date(),
+      });
+
+      // Auto-hide after duration
+      if (duration > 0) {
+        notificationTimeout = setTimeout(() => {
+          setState("notification", null);
+        }, duration);
+      }
+    },
+
+    /**
+     * Show success notification
+     */
+    showSuccess(message: string, duration = 3000): void {
+      actions.showNotification(message, "success", duration);
+    },
+
+    /**
+     * Show error notification
+     */
+    showError(message: string, duration = 5000): void {
+      actions.showNotification(message, "error", duration);
+    },
+
+    /**
+     * Show warning notification
+     */
+    showWarning(message: string, duration = 4000): void {
+      actions.showNotification(message, "warning", duration);
+    },
+
+    /**
+     * Clear notification
+     */
+    clearNotification(): void {
+      if (notificationTimeout) {
+        clearTimeout(notificationTimeout);
+        notificationTimeout = null;
+      }
+      setState("notification", null);
+    },
+
+    /**
+     * Update terminal size
+     */
+    setTerminalSize(size: TerminalSize): void {
+      setState("terminalSize", size);
+    },
+
+    /**
+     * Set loading state
+     */
+    setLoading(isLoading: boolean, message?: string): void {
+      const loadingState: LoadingState = { isLoading };
+      if (message !== undefined) loadingState.message = message;
+      setState("loading", loadingState);
+    },
+
+    /**
+     * Set loading progress
+     */
+    setLoadingProgress(progress: number, message?: string): void {
+      const loadingState: LoadingState = { isLoading: true, progress };
+      if (message !== undefined) loadingState.message = message;
+      setState("loading", loadingState);
+    },
+
+    /**
+     * Clear loading state
+     */
+    clearLoading(): void {
+      setState("loading", { isLoading: false });
+    },
+
+    /**
+     * Enter search mode
+     */
+    enterSearchMode(): void {
+      setState("searchMode", true);
+    },
+
+    /**
+     * Exit search mode
+     */
+    exitSearchMode(): void {
+      setState("searchMode", false);
+    },
+
+    /**
+     * Toggle search mode
+     */
+    toggleSearchMode(): void {
+      setState("searchMode", (v) => !v);
+    },
+
+    /**
+     * Show confirm dialog
+     */
+    showConfirmDialog(message: string): void {
+      setState("confirmDialogVisible", true);
+      setState("confirmDialogMessage", message);
+    },
+
+    /**
+     * Hide confirm dialog
+     */
+    hideConfirmDialog(): void {
+      setState("confirmDialogVisible", false);
+      setState("confirmDialogMessage", "");
+    },
+  };
+
+  return {
+    state,
+    actions,
+  };
+}
+
+// ========================================
+// Singleton Export
+// ========================================
+
+let _store: ReturnType<typeof createUIStore> | null = null;
+
+export function getUIStore() {
+  if (!_store) {
+    createRoot(() => {
+      _store = createUIStore();
+    });
+  }
+  // Store is guaranteed to be initialized by createRoot
+  return _store as ReturnType<typeof createUIStore>;
+}
+
+// Convenience exports
+export const uiStore = new Proxy({} as UIStoreState, {
+  get: (_, prop) => getUIStore().state[prop as keyof UIStoreState],
+});
+
+export const uiActions = new Proxy(
+  {} as ReturnType<typeof createUIStore>["actions"],
+  {
+    get: (_, prop) =>
+      getUIStore().actions[
+        prop as keyof ReturnType<typeof createUIStore>["actions"]
+      ],
+  },
+);

package/src/cli/ui/types.ts

@@ -162,6 +162,21 @@ export interface CleanupTarget {
   reasons?: CleanupReason[];
 }
 
+export interface CleanupStatus {
+  branch: string;
+  worktreePath: string | null;
+  hasUncommittedChanges: boolean;
+  hasUnpushedCommits: boolean;
+  hasRemoteBranch: boolean;
+  hasUniqueCommits: boolean;
+  hasUpstream: boolean;
+  upstream?: string | null;
+  cleanupType: "worktree-and-branch" | "branch-only";
+  isAccessible?: boolean;
+  invalidReason?: string;
+  reasons: CleanupReason[];
+}
+
 export interface GitHubPRAuthor {
   id?: string;
   is_bot?: boolean;
@@ -180,11 +195,11 @@ export interface GitHubPRResponse {
 }
 
 // ========================================
-// Ink.js UI Types (Phase 2+)
+// CLI UI Types
 // ========================================
 
 /**
- * Screen types for Ink.js UI
+ * Screen types for CLI UI
  */
 export type ScreenType =
   | "branch-list"
@@ -239,8 +254,10 @@ export interface BranchItem extends BranchInfo {
   syncStatus?: SyncStatus;
   syncInfo?: string | undefined;
   remoteName?: string | undefined;
-  // クリーンアップ判定で「未コミット/未プッシュなし かつマージ済み」と評価された場合に true
+  // クリーンアップ候補判定で安全と評価された場合に true
   safeToCleanup?: boolean;
+  // ベースブランチとの差分があり未マージと判定された場合に true
+  isUnmerged?: boolean;
 }
 
 /**

package/src/cli/ui/utils/__tests__/branchFormatter.test.ts

@@ -0,0 +1,180 @@
+import { describe, expect, it } from "bun:test";
+import {
+  formatBranchItem,
+  getLatestActivityTimestamp,
+} from "../branchFormatter.js";
+import type { BranchInfo } from "../../types.js";
+
+// TDD: テストを先に書き、実装は後から行う
+
+describe("branchFormatter", () => {
+  describe("buildLastToolUsageLabel with version", () => {
+    const baseBranch: BranchInfo = {
+      name: "feature/test",
+      type: "local",
+      isCurrent: false,
+      branchType: "feature",
+      hasRemoteCounterpart: false,
+    };
+
+    it("should format as 'ToolName@1.0.3 | 2024-01-08 12:00' with version", () => {
+      const branch: BranchInfo = {
+        ...baseBranch,
+        lastToolUsage: {
+          branch: "feature/test",
+          worktreePath: "/path/to/worktree",
+          toolId: "claude-code",
+          toolLabel: "Claude Code",
+          timestamp: new Date("2024-01-08T12:00:00").getTime(),
+          toolVersion: "1.0.3",
+        },
+      };
+
+      const item = formatBranchItem(branch);
+      expect(item.lastToolUsageLabel).toBe("Claude@1.0.3 | 2024-01-08 12:00");
+    });
+
+    it("should format as 'ToolName@latest | 2024-01-08 12:00' when version is null", () => {
+      const branch: BranchInfo = {
+        ...baseBranch,
+        lastToolUsage: {
+          branch: "feature/test",
+          worktreePath: "/path/to/worktree",
+          toolId: "claude-code",
+          toolLabel: "Claude Code",
+          timestamp: new Date("2024-01-08T12:00:00").getTime(),
+          toolVersion: null,
+        },
+      };
+
+      const item = formatBranchItem(branch);
+      expect(item.lastToolUsageLabel).toBe("Claude@latest | 2024-01-08 12:00");
+    });
+
+    it("should format as 'ToolName@latest | 2024-01-08 12:00' when version is undefined", () => {
+      const branch: BranchInfo = {
+        ...baseBranch,
+        lastToolUsage: {
+          branch: "feature/test",
+          worktreePath: "/path/to/worktree",
+          toolId: "claude-code",
+          toolLabel: "Claude Code",
+          timestamp: new Date("2024-01-08T12:00:00").getTime(),
+        },
+      };
+
+      const item = formatBranchItem(branch);
+      expect(item.lastToolUsageLabel).toBe("Claude@latest | 2024-01-08 12:00");
+    });
+
+    it("should format Codex with version", () => {
+      const branch: BranchInfo = {
+        ...baseBranch,
+        lastToolUsage: {
+          branch: "feature/test",
+          worktreePath: "/path/to/worktree",
+          toolId: "codex-cli",
+          toolLabel: "Codex CLI",
+          timestamp: new Date("2024-01-08T15:30:00").getTime(),
+          toolVersion: "2.1.0-beta.1",
+        },
+      };
+
+      const item = formatBranchItem(branch);
+      expect(item.lastToolUsageLabel).toBe(
+        "Codex@2.1.0-beta.1 | 2024-01-08 15:30",
+      );
+    });
+
+    it("should format Gemini with version", () => {
+      const branch: BranchInfo = {
+        ...baseBranch,
+        lastToolUsage: {
+          branch: "feature/test",
+          worktreePath: "/path/to/worktree",
+          toolId: "gemini-cli",
+          toolLabel: "Gemini CLI",
+          timestamp: new Date("2024-01-08T09:15:00").getTime(),
+          toolVersion: "0.5.0",
+        },
+      };
+
+      const item = formatBranchItem(branch);
+      expect(item.lastToolUsageLabel).toBe("Gemini@0.5.0 | 2024-01-08 09:15");
+    });
+
+    it("should format custom tool with version", () => {
+      const branch: BranchInfo = {
+        ...baseBranch,
+        lastToolUsage: {
+          branch: "feature/test",
+          worktreePath: "/path/to/worktree",
+          toolId: "custom-tool",
+          toolLabel: "MyTool",
+          timestamp: new Date("2024-01-08T10:00:00").getTime(),
+          toolVersion: "1.0.0",
+        },
+      };
+
+      const item = formatBranchItem(branch);
+      expect(item.lastToolUsageLabel).toBe("MyTool@1.0.0 | 2024-01-08 10:00");
+    });
+
+    it("should return null when lastToolUsage is undefined", () => {
+      const branch: BranchInfo = {
+        ...baseBranch,
+        lastToolUsage: undefined,
+      };
+
+      const item = formatBranchItem(branch);
+      expect(item.lastToolUsageLabel).toBeNull();
+    });
+
+    it("should return null when lastToolUsage is null", () => {
+      const branch: BranchInfo = {
+        ...baseBranch,
+        lastToolUsage: null,
+      };
+
+      const item = formatBranchItem(branch);
+      expect(item.lastToolUsageLabel).toBeNull();
+    });
+  });
+
+  describe("getLatestActivityTimestamp", () => {
+    it("should return git timestamp when tool usage is undefined", () => {
+      const branch: BranchInfo = {
+        name: "feature/test",
+        type: "local",
+        isCurrent: false,
+        branchType: "feature",
+        hasRemoteCounterpart: false,
+        latestCommitTimestamp: 1704700800, // 2024-01-08 12:00:00 UTC in seconds
+      };
+
+      const result = getLatestActivityTimestamp(branch);
+      expect(result).toBe(1704700800);
+    });
+
+    it("should return tool timestamp when it is newer than git timestamp", () => {
+      const branch: BranchInfo = {
+        name: "feature/test",
+        type: "local",
+        isCurrent: false,
+        branchType: "feature",
+        hasRemoteCounterpart: false,
+        latestCommitTimestamp: 1704700800, // 2024-01-08 12:00:00 UTC in seconds
+        lastToolUsage: {
+          branch: "feature/test",
+          worktreePath: "/path/to/worktree",
+          toolId: "claude-code",
+          toolLabel: "Claude Code",
+          timestamp: 1704704400000, // 2024-01-08 13:00:00 UTC in milliseconds
+        },
+      };
+
+      const result = getLatestActivityTimestamp(branch);
+      expect(result).toBe(1704704400); // converted to seconds
+    });
+  });
+});

package/src/cli/ui/utils/branchFormatter.ts

@@ -1,94 +1,9 @@
 import type {
   BranchInfo,
   BranchItem,
-  BranchType,
   WorktreeStatus,
   WorktreeInfo,
 } from "../types.js";
-import stringWidth from "string-width";
-
-// Icon mappings
-const branchIcons: Record<BranchType, string> = {
-  main: "⚡",
-  develop: "⚡",
-  feature: "✨",
-  bugfix: "🐛",
-  hotfix: "🔥",
-  release: "🚀",
-  other: "📌",
-};
-
-const worktreeIcons: Record<Exclude<WorktreeStatus, undefined>, string> = {
-  active: "🟢",
-  inaccessible: "🔴",
-};
-
-const changeIcons = {
-  current: "👉",
-  hasChanges: "💾",
-  unpushed: "📤",
-  openPR: "🔃",
-  mergedPR: "✅",
-  warning: "⚠️",
-};
-
-const remoteIcon = "☁";
-
-// Sync status icons
-const syncIcons = {
-  upToDate: "✓",
-  ahead: "↑",
-  behind: "↓",
-  diverged: "↕",
-  none: "-",
-  remoteOnly: "☁",
-};
-
-// Remote column markers
-const remoteMarkers = {
-  tracked: "🔗", // ローカル+同名リモートあり
-  localOnly: "💻", // ローカルのみ（リモートなし）
-  remoteOnly: "☁️", // リモートのみ（ローカルなし）
-};
-
-// Emoji width varies by terminal. Provide explicit minimum widths so we never
-// underestimate and accidentally push the row past the terminal columns.
-const iconWidthOverrides: Record<string, number> = {
-  // Remote icon
-  [remoteIcon]: 1,
-  // Branch type icons
-  "⚡": 1,
-  "✨": 1,
-  "🐛": 1,
-  "🔥": 1,
-  "🚀": 1,
-  "📌": 1,
-  // Worktree status icons
-  "🟢": 2,
-  "⚪": 2,
-  "🔴": 2,
-  // Change status icons
-  "👉": 1,
-  "💾": 1,
-  "📤": 1,
-  "🔃": 1,
-  "✅": 1,
-  "⚠️": 2,
-  "⚠": 1,
-  "🛡": 2,
-  "☑": 2,
-  "☐": 2,
-  // Remote markers
-  "🔗": 1,
-  "💻": 1,
-  "☁️": 1,
-};
-
-const getIconWidth = (icon: string): number => {
-  const baseWidth = stringWidth(icon);
-  const override = iconWidthOverrides[icon];
-  return override !== undefined ? Math.max(baseWidth, override) : baseWidth;
-};
 
 export interface FormatOptions {
   hasChanges?: boolean;
@@ -117,8 +32,11 @@ function buildLastToolUsageLabel(
 ): string | null {
   if (!usage) return null;
   const toolText = mapToolLabel(usage.toolId, usage.toolLabel);
+  // バージョン情報を追加（存在しない場合は@latest）
+  const versionSuffix = usage.toolVersion ? `@${usage.toolVersion}` : "@latest";
+  const labelWithVersion = `${toolText}${versionSuffix}`;
   const timestamp = usage.timestamp ? formatTimestamp(usage.timestamp) : null;
-  const parts = [toolText];
+  const parts = [labelWithVersion];
   if (timestamp) {
     parts.push(timestamp);
   }
@@ -146,106 +64,10 @@ export function formatBranchItem(
   options: FormatOptions = {},
 ): BranchItem {
   const hasChanges = options.hasChanges ?? false;
-  const COLUMN_WIDTH = 2; // Fixed width for each icon column
-
-  // Helper to pad icon to fixed width
-  const padIcon = (icon: string): string => {
-    const width = getIconWidth(icon);
-    const padding = Math.max(0, COLUMN_WIDTH - width);
-    return icon + " ".repeat(padding);
-  };
-
-  // Column 1: Branch type icon (always present)
-  const branchTypeIcon = padIcon(branchIcons[branch.branchType]);
-
-  // Column 2: Worktree status icon
-  let worktreeStatus: WorktreeStatus;
-  let worktreeIcon: string;
+  let worktreeStatus: WorktreeStatus | undefined;
   if (branch.worktree) {
-    if (branch.worktree.isAccessible === false) {
-      worktreeStatus = "inaccessible";
-      worktreeIcon = padIcon(worktreeIcons.inaccessible);
-    } else {
-      worktreeStatus = "active";
-      worktreeIcon = padIcon(worktreeIcons.active);
-    }
-  } else {
-    worktreeIcon = " ".repeat(COLUMN_WIDTH);
-  }
-
-  // Column 3: Change status icon (priority: ✏️ > ⬆️ > 🔀 > ✅ > ⚠️ > ⭐)
-  let changesIcon: string;
-  if (hasChanges) {
-    changesIcon = padIcon(changeIcons.hasChanges);
-  } else if (branch.hasUnpushedCommits) {
-    changesIcon = padIcon(changeIcons.unpushed);
-  } else if (branch.openPR) {
-    changesIcon = padIcon(changeIcons.openPR);
-  } else if (branch.mergedPR) {
-    changesIcon = padIcon(changeIcons.mergedPR);
-  } else if (branch.worktree?.isAccessible === false) {
-    changesIcon = padIcon(changeIcons.warning);
-  } else if (branch.isCurrent) {
-    changesIcon = padIcon(changeIcons.current);
-  } else {
-    changesIcon = " ".repeat(COLUMN_WIDTH);
-  }
-
-  // Column 4: Remote status (✓ for tracked, L for local-only, R for remote-only)
-  let remoteStatusStr: string;
-  if (branch.type === "remote") {
-    // リモートのみのブランチ
-    remoteStatusStr = padIcon(remoteMarkers.remoteOnly);
-  } else if (branch.hasRemoteCounterpart) {
-    // ローカルブランチで同名リモートあり
-    remoteStatusStr = padIcon(remoteMarkers.tracked);
-  } else {
-    // ローカルブランチでリモートなし
-    remoteStatusStr = padIcon(remoteMarkers.localOnly);
-  }
-
-  // Column 5: Sync status (=, ↑N, ↓N, ↕, -)
-  // 5文字固定幅（アイコン1文字 + 数字最大4桁）、9999超は「9999+」表示
-  const SYNC_COLUMN_WIDTH = 6; // アイコン1 + 数字4 + スペース1
-
-  // 数字を4桁以内にフォーマット（9999超は9999+）
-  const formatSyncNumber = (n: number): string => {
-    if (n > 9999) return "9999+";
-    return String(n);
-  };
-
-  // Sync列を固定幅でパディング
-  const padSyncColumn = (content: string): string => {
-    const width = stringWidth(content);
-    const padding = Math.max(0, SYNC_COLUMN_WIDTH - width);
-    return content + " ".repeat(padding);
-  };
-
-  let syncStatusStr: string;
-  if (branch.type === "remote") {
-    // リモートのみ → 比較不可
-    syncStatusStr = padSyncColumn(syncIcons.none);
-  } else if (branch.divergence) {
-    const { ahead, behind, upToDate } = branch.divergence;
-    if (upToDate) {
-      syncStatusStr = padSyncColumn(syncIcons.upToDate);
-    } else if (ahead > 0 && behind > 0) {
-      // diverged: ↕ のみ表示（詳細は別途表示可能）
-      syncStatusStr = padSyncColumn(syncIcons.diverged);
-    } else if (ahead > 0) {
-      // ahead: ↑N の形式
-      syncStatusStr = padSyncColumn(
-        `${syncIcons.ahead}${formatSyncNumber(ahead)}`,
-      );
-    } else {
-      // behind: ↓N の形式
-      syncStatusStr = padSyncColumn(
-        `${syncIcons.behind}${formatSyncNumber(behind)}`,
-      );
-    }
-  } else {
-    // divergence情報なし
-    syncStatusStr = padSyncColumn(syncIcons.none);
+    worktreeStatus =
+      branch.worktree.isAccessible === false ? "inaccessible" : "active";
   }
 
   // Build Local/Remote name for display
@@ -263,37 +85,8 @@ export function formatBranchItem(
     displayName = branch.name;
   }
 
-  // Build label with fixed-width columns
-  // Format: [Type][Worktree][Changes][Remote][Sync] DisplayName
-  const label = `${branchTypeIcon}${worktreeIcon}${changesIcon}${remoteStatusStr}${syncStatusStr}${displayName}`;
-
-  // Collect icons for compatibility
+  const label = displayName;
   const icons: string[] = [];
-  icons.push(branchIcons[branch.branchType]);
-  if (worktreeStatus) {
-    icons.push(
-      worktreeStatus === "active"
-        ? worktreeIcons.active
-        : worktreeIcons.inaccessible,
-    );
-  }
-  // Add change icon based on priority
-  if (hasChanges) {
-    icons.push(changeIcons.hasChanges);
-  } else if (branch.hasUnpushedCommits) {
-    icons.push(changeIcons.unpushed);
-  } else if (branch.openPR) {
-    icons.push(changeIcons.openPR);
-  } else if (branch.mergedPR) {
-    icons.push(changeIcons.mergedPR);
-  } else if (branch.worktree?.isAccessible === false) {
-    icons.push(changeIcons.warning);
-  } else if (branch.isCurrent) {
-    icons.push(changeIcons.current);
-  }
-  if (branch.type === "remote") {
-    icons.push(remoteIcon);
-  }
 
   // Determine sync status for BranchItem
   let syncStatus: BranchItem["syncStatus"];