@akiojin/gwt 4.10.0 → 4.11.6

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

@@ -1,14 +1,13 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect } from "bun:test";
 import {
   formatBranchItem,
   formatBranchItems,
 } from "../../utils/branchFormatter.js";
 import type { BranchInfo } from "../../types.js";
-import stringWidth from "string-width";
 
 describe("branchFormatter", () => {
   describe("formatBranchItem", () => {
-    it("should format a main branch", () => {
+    it("should format a branch without icons", () => {
       const branchInfo: BranchInfo = {
         name: "main",
         type: "local",
@@ -22,29 +21,12 @@ describe("branchFormatter", () => {
       expect(result.type).toBe("local");
       expect(result.branchType).toBe("main");
       expect(result.isCurrent).toBe(true);
-      expect(result.icons).toContain("⚡"); // main icon
-      expect(result.icons).toContain("👉"); // current icon
-      expect(result.label).toContain("main");
+      expect(result.icons).toHaveLength(0);
+      expect(result.label).toBe("main");
       expect(result.value).toBe("main");
       expect(result.hasChanges).toBe(false);
     });
 
-    it("should format a feature branch", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/new-ui",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("✨"); // feature icon
-      expect(result.icons).not.toContain("👉"); // not current
-      expect(result.label).toContain("feature/new-ui");
-      expect(result.value).toBe("feature/new-ui");
-    });
-
     it("should include last tool usage label when present", () => {
       const branchInfo: BranchInfo = {
         name: "feature/tool",
@@ -68,20 +50,6 @@ describe("branchFormatter", () => {
       expect(result.lastToolUsageLabel).toContain("2025-11-26");
     });
 
-    it("should format a bugfix branch", () => {
-      const branchInfo: BranchInfo = {
-        name: "bugfix/security-issue",
-        type: "local",
-        branchType: "bugfix",
-        isCurrent: false,
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("🐛"); // bugfix icon
-      expect(result.label).toContain("bugfix/security-issue");
-    });
-
     it("should set lastToolUsageLabel to null when no usage exists", () => {
       const branchInfo: BranchInfo = {
         name: "feature/no-usage",
@@ -95,34 +63,6 @@ describe("branchFormatter", () => {
       expect(result.lastToolUsageLabel).toBeNull();
     });
 
-    it("should format a hotfix branch", () => {
-      const branchInfo: BranchInfo = {
-        name: "hotfix/critical-bug",
-        type: "local",
-        branchType: "hotfix",
-        isCurrent: false,
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("🔥"); // hotfix icon
-      expect(result.label).toContain("hotfix/critical-bug");
-    });
-
-    it("should format a release branch", () => {
-      const branchInfo: BranchInfo = {
-        name: "release/v1.0.0",
-        type: "local",
-        branchType: "release",
-        isCurrent: false,
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("🚀"); // release icon
-      expect(result.label).toContain("release/v1.0.0");
-    });
-
     it("should format a remote branch", () => {
       const branchInfo: BranchInfo = {
         name: "origin/main",
@@ -133,64 +73,12 @@ describe("branchFormatter", () => {
 
       const result = formatBranchItem(branchInfo);
 
-      expect(result.icons).toContain("⚡"); // main icon
-      expect(result.icons).toContain("☁"); // remote icon
       expect(result.type).toBe("remote");
-      expect(result.label).toContain("origin/main");
-    });
-
-    it("should align branch names regardless of remote icon presence", () => {
-      const localBranch: BranchInfo = {
-        name: "feature/foo",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-      };
-      const remoteBranch: BranchInfo = {
-        name: "origin/feature/foo",
-        type: "remote",
-        branchType: "feature",
-        isCurrent: false,
-      };
-
-      const localResult = formatBranchItem(localBranch);
-      const remoteResult = formatBranchItem(remoteBranch);
-
-      // Both should have the branch name in the label
-      expect(localResult.label).toContain("feature/foo");
-      expect(remoteResult.label).toContain("origin/feature/foo");
-
-      // Remote branch should have ☁️ marker for remote-only status
-      expect(remoteResult.label).toMatch(/☁️/);
-    });
-
-    it("should keep icon columns fixed-width when using wide emoji icons", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/wide-icons",
-        type: "remote",
-        branchType: "feature",
-        isCurrent: false,
-        hasUnpushedCommits: true,
-        worktree: {
-          path: "/path/to/worktree",
-          locked: false,
-          prunable: false,
-          isAccessible: true,
-        },
-      };
-
-      const result = formatBranchItem(branchInfo, { hasChanges: true });
-
-      // Icon columns: [Type][Worktree][Changes][Remote] = 4 * 2 = 8
-      // Sync column: 6 (fixed width for icon + up to 4 digits + space)
-      // Total: 14
-      const iconBlockWidth =
-        stringWidth(result.label) - stringWidth(branchInfo.name);
-
-      expect(iconBlockWidth).toBe(14);
+      expect(result.label).toBe("origin/main");
+      expect(result.remoteName).toBe("origin/main");
     });
 
-    it("should include worktree status icon when provided", () => {
+    it("should set worktree status when provided", () => {
       const branchInfo: BranchInfo = {
         name: "feature/test",
         type: "local",
@@ -205,7 +93,6 @@ describe("branchFormatter", () => {
 
       const result = formatBranchItem(branchInfo);
 
-      expect(result.icons).toContain("🟢"); // active worktree icon
       expect(result.worktreeStatus).toBe("active");
     });
 
@@ -219,55 +106,9 @@ describe("branchFormatter", () => {
 
       const result = formatBranchItem(branchInfo, { hasChanges: true });
 
-      expect(result.icons).toContain("💾"); // changes icon
       expect(result.hasChanges).toBe(true);
     });
 
-    it("should show unpushed commits icon", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/unpushed",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-        hasUnpushedCommits: true,
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("📤"); // unpushed icon
-      expect(result.label).toContain("📤");
-    });
-
-    it("should show open PR icon", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/pr-open",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-        openPR: { number: 123, title: "Test PR" },
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("🔃"); // open PR icon
-      expect(result.label).toContain("🔃");
-    });
-
-    it("should show merged PR icon", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/pr-merged",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-        mergedPR: { number: 456, mergedAt: "2025-10-31T00:00:00Z" },
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("✅"); // merged PR icon
-      expect(result.label).toContain("✅");
-    });
-
     it("should show warning icon for inaccessible worktree", () => {
       const branchInfo: BranchInfo = {
         name: "feature/broken-worktree",
@@ -284,131 +125,8 @@ describe("branchFormatter", () => {
 
       const result = formatBranchItem(branchInfo);
 
-      expect(result.icons).toContain("🔴"); // inaccessible worktree icon
-      expect(result.icons).toContain("⚠️"); // warning icon
       expect(result.worktreeStatus).toBe("inaccessible");
     });
-
-    it("should prioritize hasChanges over unpushed commits", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/both",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-        hasUnpushedCommits: true,
-      };
-
-      const resultWithChanges = formatBranchItem(branchInfo, {
-        hasChanges: true,
-      });
-      expect(resultWithChanges.icons).toContain("💾");
-      expect(resultWithChanges.icons).not.toContain("📤");
-
-      const resultWithoutChanges = formatBranchItem(branchInfo);
-      expect(resultWithoutChanges.icons).toContain("📤");
-      expect(resultWithoutChanges.icons).not.toContain("💾");
-    });
-
-    it("should prioritize unpushed over open PR", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/unpushed-pr",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-        hasUnpushedCommits: true,
-        openPR: { number: 123, title: "Test PR" },
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("📤");
-      expect(result.icons).not.toContain("🔃");
-    });
-
-    it("should prioritize open PR over merged PR", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/both-pr",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-        openPR: { number: 123, title: "Test PR" },
-        mergedPR: { number: 456, mergedAt: "2025-10-31T00:00:00Z" },
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("🔃");
-      expect(result.icons).not.toContain("✅");
-    });
-
-    it("should prioritize merged PR over warning", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/merged-broken",
-        type: "local",
-        branchType: "feature",
-        isCurrent: false,
-        mergedPR: { number: 456, mergedAt: "2025-10-31T00:00:00Z" },
-        worktree: {
-          path: "/path/to/worktree",
-          locked: false,
-          prunable: false,
-          isAccessible: false,
-        },
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("✅");
-      expect(result.icons).not.toContain("⚠️");
-    });
-
-    it("should prioritize warning over current branch icon", () => {
-      const branchInfo: BranchInfo = {
-        name: "feature/current-broken",
-        type: "local",
-        branchType: "feature",
-        isCurrent: true,
-        worktree: {
-          path: "/path/to/worktree",
-          locked: false,
-          prunable: false,
-          isAccessible: false,
-        },
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("⚠️");
-      expect(result.icons).not.toContain("👉");
-    });
-
-    it("should handle develop branch", () => {
-      const branchInfo: BranchInfo = {
-        name: "develop",
-        type: "local",
-        branchType: "develop",
-        isCurrent: false,
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("⚡"); // develop icon (same as main)
-      expect(result.label).toContain("develop");
-    });
-
-    it("should handle other branch type", () => {
-      const branchInfo: BranchInfo = {
-        name: "custom-branch",
-        type: "local",
-        branchType: "other",
-        isCurrent: false,
-      };
-
-      const result = formatBranchItem(branchInfo);
-
-      expect(result.icons).toContain("📌"); // other icon
-      expect(result.label).toContain("custom-branch");
-    });
   });
 
   describe("formatBranchItems", () => {

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

@@ -1,9 +1,9 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, mock } from "bun:test";
 import { copyToClipboard } from "../../utils/clipboard.js";
 
-const execaMock = vi.fn();
+const execaMock = mock();
 
-vi.mock("execa", () => ({
+mock.module("execa", () => ({
   execa: (...args: unknown[]) => execaMock(...args),
 }));
 

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

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect } from "bun:test";
 import { calculateStatistics } from "../../utils/statisticsCalculator.js";
 import type { BranchInfo } from "../../types.js";
 

package/src/cli/ui/components/solid/Footer.tsx

@@ -0,0 +1,36 @@
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
+
+export interface FooterAction {
+  key: string;
+  description: string;
+}
+
+export interface FooterProps {
+  actions: FooterAction[];
+  separator?: string;
+}
+
+export function Footer({ actions, separator = "  " }: FooterProps) {
+  if (actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <box flexDirection="row">
+      {actions.map((action, index) => (
+        <>
+          <text attributes={TextAttributes.DIM}>[</text>
+          <text fg="cyan" attributes={TextAttributes.BOLD}>
+            {action.key}
+          </text>
+          <text attributes={TextAttributes.DIM}>]</text>
+          <text>{` ${action.description}`}</text>
+          {index < actions.length - 1 ? (
+            <text attributes={TextAttributes.DIM}>{separator}</text>
+          ) : null}
+        </>
+      ))}
+    </box>
+  );
+}

package/src/cli/ui/components/{parts → solid}/Header.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { Box, Text } from "ink";
+/** @jsxImportSource @opentui/solid */
+import { TextAttributes } from "@opentui/core";
 
 export interface HeaderProps {
   title: string;
@@ -32,47 +32,36 @@ export interface HeaderProps {
   activeProfile?: string | null | undefined;
 }
 
-/**
- * Header component - displays title and optional divider
- * Optimized with React.memo to prevent unnecessary re-renders
- */
-export const Header = React.memo(function Header({
+export function Header({
   title,
   titleColor = "cyan",
-  dividerChar = "─",
+  dividerChar = "-",
   showDivider = true,
   width = 80,
   version,
   workingDirectory,
   activeProfile,
 }: HeaderProps) {
-  const divider = dividerChar.repeat(width);
+  const divider = dividerChar.repeat(Math.max(0, width));
 
-  // タイトル構築: "gwt v2.14 | Profile: development" または "gwt v2.14 | Profile: (none)"
   let displayTitle = version ? `${title} v${version}` : title;
   if (activeProfile !== undefined) {
     const profileLabel = activeProfile ?? "(none)";
-    displayTitle = `${displayTitle} | Profile: ${profileLabel}`;
+    displayTitle = `${displayTitle} | Profile(p): ${profileLabel}`;
   }
 
   return (
-    <Box flexDirection="column">
-      <Box>
-        <Text bold color={titleColor}>
-          {displayTitle}
-        </Text>
-      </Box>
-      {showDivider && (
-        <Box>
-          <Text dimColor>{divider}</Text>
-        </Box>
-      )}
+    <box flexDirection="column">
+      <text fg={titleColor} attributes={TextAttributes.BOLD}>
+        {displayTitle}
+      </text>
+      {showDivider && <text attributes={TextAttributes.DIM}>{divider}</text>}
       {workingDirectory && (
-        <Box>
-          <Text dimColor>Working Directory: </Text>
-          <Text>{workingDirectory}</Text>
-        </Box>
+        <box flexDirection="row">
+          <text attributes={TextAttributes.DIM}>Working Directory: </text>
+          <text>{workingDirectory}</text>
+        </box>
       )}
-    </Box>
+    </box>
   );
-});
+}

package/src/cli/ui/components/solid/HelpOverlay.tsx

@@ -0,0 +1,194 @@
+/** @jsxImportSource @opentui/solid */
+import { useTerminalDimensions } from "@opentui/solid";
+import { createMemo } from "solid-js";
+import stringWidth from "string-width";
+import {
+  formatKeyCombination,
+  getKeybindingsForAction,
+  getKeybindingsForContext,
+  type KeybindingDef,
+} from "../../core/keybindings.js";
+
+export interface HelpOverlayProps {
+  visible: boolean;
+  context?: string;
+  title?: string;
+  maxWidth?: number;
+}
+
+interface HelpItem {
+  key: string;
+  description: string;
+}
+
+const DEFAULT_TITLE = "Help";
+const DEFAULT_MAX_WIDTH = 76;
+const COLUMN_GAP = 2;
+const MIN_COLUMN_WIDTH = 18;
+const MIN_CONTENT_WIDTH = 10;
+const ELLIPSIS = "...";
+
+const measureWidth = (value: string): number => stringWidth(value);
+
+const truncateToWidth = (value: string, width: number): string => {
+  if (width <= 0) {
+    return "";
+  }
+  if (measureWidth(value) <= width) {
+    return value;
+  }
+  if (width <= ELLIPSIS.length) {
+    return value.slice(0, width);
+  }
+
+  let currentWidth = 0;
+  let result = "";
+  for (const char of Array.from(value)) {
+    const charWidth = measureWidth(char);
+    if (currentWidth + charWidth > width - ELLIPSIS.length) {
+      break;
+    }
+    result += char;
+    currentWidth += charWidth;
+  }
+  return `${result}${ELLIPSIS}`;
+};
+
+const fitText = (value: string, width: number): string => {
+  if (width <= 0) {
+    return "";
+  }
+  const truncated = truncateToWidth(value, width);
+  const padding = Math.max(0, width - measureWidth(truncated));
+  return truncated + " ".repeat(padding);
+};
+
+const normalizeKeyLabel = (combo: KeybindingDef["key"]): string => {
+  return formatKeyCombination(combo);
+};
+
+const buildHelpItems = (context?: string): HelpItem[] => {
+  const items: HelpItem[] = [];
+  const seen = new Set<string>();
+  const targetContext = context ?? "branch-list";
+
+  const appendBinding = (binding: KeybindingDef) => {
+    const key = normalizeKeyLabel(binding.key);
+    const description = binding.description;
+    const id = `${key}|${description}`;
+    if (seen.has(id)) {
+      return;
+    }
+    seen.add(id);
+    items.push({ key, description });
+  };
+
+  for (const binding of getKeybindingsForContext(targetContext)) {
+    if (binding.action === "show-help") {
+      continue;
+    }
+    appendBinding(binding);
+  }
+
+  for (const binding of getKeybindingsForAction("hide-help")) {
+    appendBinding(binding);
+  }
+
+  return items;
+};
+
+export function HelpOverlay({
+  visible,
+  context,
+  title = DEFAULT_TITLE,
+  maxWidth = DEFAULT_MAX_WIDTH,
+}: HelpOverlayProps) {
+  const terminal = useTerminalDimensions();
+
+  const layout = createMemo(() => {
+    const width = terminal().width ?? 80;
+    const height = terminal().height ?? 24;
+    const safeWidth = Math.max(10, width - 2);
+    const overlayWidth = Math.min(maxWidth, safeWidth, width);
+    const contentWidth = Math.max(MIN_CONTENT_WIDTH, overlayWidth - 4);
+    const maxRows = Math.max(4, height - 6);
+
+    const items = buildHelpItems(context);
+    if (items.length === 0) {
+      return {
+        overlayWidth,
+        rows: [fitText("No keybindings available.", contentWidth)],
+      };
+    }
+
+    const keyWidth = Math.min(
+      16,
+      Math.max(4, ...items.map((item) => measureWidth(item.key))),
+    );
+
+    const lines = items.map(
+      (item) => `${fitText(item.key, keyWidth)} ${item.description}`,
+    );
+
+    const shouldUseTwoColumns =
+      lines.length > maxRows &&
+      contentWidth >= MIN_COLUMN_WIDTH * 2 + COLUMN_GAP;
+    const columnCount = shouldUseTwoColumns ? 2 : 1;
+    const columnGap = columnCount === 2 ? COLUMN_GAP : 0;
+    const columnWidth = Math.floor((contentWidth - columnGap) / columnCount);
+    const rowsPerColumn = Math.ceil(lines.length / columnCount);
+
+    const rows: string[] = [];
+    for (let row = 0; row < rowsPerColumn; row += 1) {
+      const left = lines[row] ?? "";
+      const right = columnCount === 2 ? (lines[row + rowsPerColumn] ?? "") : "";
+      const leftCell = fitText(left, columnWidth);
+      const rightCell = columnCount === 2 ? fitText(right, columnWidth) : "";
+      const rowText =
+        columnCount === 2
+          ? `${leftCell}${" ".repeat(columnGap)}${rightCell}`
+          : leftCell;
+      rows.push(rowText);
+    }
+
+    if (rows.length > maxRows) {
+      rows.splice(maxRows);
+      rows[maxRows - 1] = fitText("... more", columnWidth);
+    }
+
+    return { overlayWidth, rows };
+  });
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+      zIndex={100}
+    >
+      <box
+        border
+        borderStyle="single"
+        borderColor="cyan"
+        padding={1}
+        width={layout().overlayWidth}
+        title={title}
+        titleAlignment="center"
+      >
+        <box flexDirection="column">
+          {layout().rows.map((row) => (
+            <text>{row}</text>
+          ))}
+        </box>
+      </box>
+    </box>
+  );
+}