@akiojin/gwt 4.6.0 → 4.7.0

package/src/cli/ui/__tests__/integration/edgeCases.test.tsx

@@ -13,7 +13,14 @@ import type { BranchInfo, BranchItem, Statistics } from "../../types.js";
 const mockRefresh = vi.fn();
 const branchListProps: BranchListScreenProps[] = [];
 const useGitDataMock = vi.fn();
-let App: typeof import("../../components/App.js").App;
+let App: typeof import("../../components/App.js").App | null = null;
+
+const loadApp = async () => {
+  if (!App) {
+    App = (await import("../../components/App.js")).App;
+  }
+  return App;
+};
 
 vi.mock("../../hooks/useGitData.js", () => ({
   useGitData: (...args: unknown[]) => useGitDataMock(...args),
@@ -53,7 +60,6 @@ describe("Edge Cases Integration Tests", () => {
     vi.clearAllMocks();
     useGitDataMock.mockReset();
     branchListProps.length = 0;
-    App = (await import("../../components/App.js")).App;
   });
 
   /**
@@ -237,13 +243,14 @@ describe("Edge Cases Integration Tests", () => {
     });
 
     const onExit = vi.fn();
-    const { container } = render(<App onExit={onExit} />);
+    const AppComponent = await loadApp();
+    const { container } = render(<AppComponent onExit={onExit} />);
 
     // Initial render should work
     expect(container).toBeDefined();
   });
 
-  it("[T093] should display error message when data loading fails", () => {
+  it("[T093] should display error message when data loading fails", async () => {
     const testError = new Error("Test error: Failed to load Git data");
     useGitDataMock.mockReturnValue({
       branches: [],
@@ -255,7 +262,8 @@ describe("Edge Cases Integration Tests", () => {
     });
 
     const onExit = vi.fn();
-    const { getByText } = render(<App onExit={onExit} />);
+    const AppComponent = await loadApp();
+    const { getByText } = render(<AppComponent onExit={onExit} />);
 
     expect(branchListProps).not.toHaveLength(0);
     expect(branchListProps.at(-1)?.error).toBe(testError);
@@ -264,7 +272,7 @@ describe("Edge Cases Integration Tests", () => {
     expect(getByText(/Failed to load Git data/i)).toBeDefined();
   });
 
-  it("[T093] should handle empty branches list gracefully", () => {
+  it("[T093] should handle empty branches list gracefully", async () => {
     useGitDataMock.mockReturnValue({
       branches: [],
       worktrees: [],
@@ -275,7 +283,8 @@ describe("Edge Cases Integration Tests", () => {
     });
 
     const onExit = vi.fn();
-    const { container } = render(<App onExit={onExit} />);
+    const AppComponent = await loadApp();
+    const { container } = render(<AppComponent onExit={onExit} />);
 
     // Should render without error even with no branches
     expect(container).toBeDefined();
@@ -284,7 +293,7 @@ describe("Edge Cases Integration Tests", () => {
   /**
    * Additional edge cases
    */
-  it("should handle large number of worktrees", () => {
+  it("should handle large number of worktrees", async () => {
     const mockBranches: BranchInfo[] = Array.from({ length: 50 }, (_, i) => ({
       name: `feature/branch-${i}`,
       type: "local" as const,
@@ -307,7 +316,8 @@ describe("Edge Cases Integration Tests", () => {
     });
 
     const onExit = vi.fn();
-    const { container } = render(<App onExit={onExit} />);
+    const AppComponent = await loadApp();
+    const { container } = render(<AppComponent onExit={onExit} />);
 
     expect(container).toBeDefined();
   });

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

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi } from "vitest";
+import { copyToClipboard } from "../../utils/clipboard.js";
+
+const execaMock = vi.fn();
+
+vi.mock("execa", () => ({
+  execa: (...args: unknown[]) => execaMock(...args),
+}));
+
+describe("copyToClipboard", () => {
+  it("uses pbcopy on darwin", async () => {
+    execaMock.mockResolvedValue({ stdout: "" });
+
+    await copyToClipboard("hello", {
+      platform: "darwin",
+      execa: execaMock as unknown as typeof import("execa").execa,
+    });
+
+    expect(execaMock).toHaveBeenCalledWith(
+      "pbcopy",
+      [],
+      expect.objectContaining({ input: "hello" }),
+    );
+  });
+
+  it("falls back to xsel when xclip fails", async () => {
+    execaMock.mockImplementation((command: string) => {
+      if (command === "xclip") {
+        return Promise.reject(new Error("missing"));
+      }
+      return Promise.resolve({ stdout: "" });
+    });
+
+    await copyToClipboard("hello", {
+      platform: "linux",
+      execa: execaMock as unknown as typeof import("execa").execa,
+    });
+
+    expect(execaMock).toHaveBeenCalledWith(
+      "xclip",
+      ["-selection", "clipboard"],
+      expect.objectContaining({ input: "hello" }),
+    );
+    expect(execaMock).toHaveBeenCalledWith(
+      "xsel",
+      ["--clipboard", "--input"],
+      expect.objectContaining({ input: "hello" }),
+    );
+  });
+
+  it("uses clip on windows", async () => {
+    execaMock.mockResolvedValue({ stdout: "" });
+
+    await copyToClipboard("hello", {
+      platform: "win32",
+      execa: execaMock as unknown as typeof import("execa").execa,
+    });
+
+    expect(execaMock).toHaveBeenCalledWith(
+      "cmd",
+      ["/c", "clip"],
+      expect.objectContaining({ input: "hello" }),
+    );
+  });
+});

package/src/cli/ui/components/App.tsx

@@ -11,6 +11,9 @@ import {
   BranchListScreen,
   type BranchListScreenProps,
 } from "./screens/BranchListScreen.js";
+import { LogListScreen } from "./screens/LogListScreen.js";
+import { LogDetailScreen } from "./screens/LogDetailScreen.js";
+import { LogDatePickerScreen } from "./screens/LogDatePickerScreen.js";
 import { BranchCreatorScreen } from "./screens/BranchCreatorScreen.js";
 import { BranchActionSelectorScreen } from "../screens/BranchActionSelectorScreen.js";
 import { AIToolSelectorScreen } from "./screens/AIToolSelectorScreen.js";
@@ -29,6 +32,19 @@ import { useScreenState } from "../hooks/useScreenState.js";
 import { useToolStatus } from "../hooks/useToolStatus.js";
 import { formatBranchItems } from "../utils/branchFormatter.js";
 import { calculateStatistics } from "../utils/statisticsCalculator.js";
+import { copyToClipboard } from "../utils/clipboard.js";
+import {
+  parseLogLines,
+  type FormattedLogEntry,
+} from "../../../logging/formatter.js";
+import {
+  buildLogFilePath,
+  getTodayLogDate,
+  listRecentLogFiles,
+  readLogFileLines,
+  resolveLogDir,
+  type LogFileInfo,
+} from "../../../logging/reader.js";
 import type {
   AITool,
   BranchInfo,
@@ -131,6 +147,26 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
   >([]);
   const [branchQuickStartLoading, setBranchQuickStartLoading] = useState(false);
 
+  // Log viewer state
+  const logDir = useMemo(
+    () => resolveLogDir(workingDirectory),
+    [workingDirectory],
+  );
+  const [logEntries, setLogEntries] = useState<FormattedLogEntry[]>([]);
+  const [logLoading, setLogLoading] = useState(false);
+  const [logError, setLogError] = useState<string | null>(null);
+  const [logSelectedDate, setLogSelectedDate] = useState<string | null>(
+    getTodayLogDate(),
+  );
+  const [logDates, setLogDates] = useState<LogFileInfo[]>([]);
+  const [logSelectedEntry, setLogSelectedEntry] =
+    useState<FormattedLogEntry | null>(null);
+  const [logNotification, setLogNotification] = useState<{
+    message: string;
+    tone: "success" | "error";
+  } | null>(null);
+  const logNotificationTimerRef = useRef<NodeJS.Timeout | null>(null);
+
   // Selection state (for branch → tool → mode flow)
   const [selectedBranch, setSelectedBranch] =
     useState<SelectedBranchState | null>(null);
@@ -182,6 +218,70 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
       .catch(() => setRepoRoot(null));
   }, []);
 
+  const showLogNotification = useCallback(
+    (message: string, tone: "success" | "error" = "success") => {
+      setLogNotification({ message, tone });
+      if (logNotificationTimerRef.current) {
+        clearTimeout(logNotificationTimerRef.current);
+      }
+      logNotificationTimerRef.current = setTimeout(() => {
+        setLogNotification(null);
+      }, 2000);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (logNotificationTimerRef.current) {
+        clearTimeout(logNotificationTimerRef.current);
+      }
+    };
+  }, []);
+
+  const loadLogEntries = useCallback(
+    async (date: string | null) => {
+      const targetDate = date ?? getTodayLogDate();
+      setLogLoading(true);
+      setLogError(null);
+      try {
+        const filePath = buildLogFilePath(logDir, targetDate);
+        const lines = await readLogFileLines(filePath);
+        const parsed = parseLogLines(lines, { limit: 100 });
+        setLogEntries(parsed);
+      } catch (error) {
+        setLogEntries([]);
+        setLogError(
+          error instanceof Error ? error.message : "Failed to load logs",
+        );
+      } finally {
+        setLogLoading(false);
+      }
+    },
+    [logDir],
+  );
+
+  const loadLogDates = useCallback(async () => {
+    try {
+      const files = await listRecentLogFiles(logDir, 7);
+      setLogDates(files);
+    } catch {
+      setLogDates([]);
+    }
+  }, [logDir]);
+
+  useEffect(() => {
+    if (currentScreen === "log-list") {
+      void loadLogEntries(logSelectedDate);
+    }
+  }, [currentScreen, loadLogEntries, logSelectedDate]);
+
+  useEffect(() => {
+    if (currentScreen === "log-date-picker") {
+      void loadLogDates();
+    }
+  }, [currentScreen, loadLogDates]);
+
   useEffect(() => {
     if (!hiddenBranches.length) {
       return;
@@ -720,6 +820,45 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
     exit();
   }, [onExit, exit]);
 
+  const handleOpenLogs = useCallback(() => {
+    setLogSelectedDate(getTodayLogDate());
+    setLogSelectedEntry(null);
+    navigateTo("log-list");
+  }, [navigateTo]);
+
+  const handleSelectLogEntry = useCallback(
+    (entry: FormattedLogEntry) => {
+      setLogSelectedEntry(entry);
+      navigateTo("log-detail");
+    },
+    [navigateTo],
+  );
+
+  const handleCopyLogEntry = useCallback(
+    async (entry: FormattedLogEntry) => {
+      try {
+        await copyToClipboard(entry.json);
+        showLogNotification("Copied to clipboard.", "success");
+      } catch {
+        showLogNotification("Failed to copy to clipboard.", "error");
+      }
+    },
+    [showLogNotification],
+  );
+
+  const handleOpenLogDates = useCallback(() => {
+    navigateTo("log-date-picker");
+  }, [navigateTo]);
+
+  const handleSelectLogDate = useCallback(
+    (date: string) => {
+      setLogSelectedDate(date);
+      setLogSelectedEntry(null);
+      navigateTo("log-list");
+    },
+    [navigateTo],
+  );
+
   // Handle branch creation
   const handleCreate = useCallback(
     async (branchName: string) => {
@@ -1150,6 +1289,7 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
         workingDirectory={workingDirectory}
         activeProfile={activeProfileName}
         onOpenProfiles={() => navigateTo("environment-profile")}
+        onOpenLogs={handleOpenLogs}
         toolStatuses={toolStatuses}
         {...additionalProps}
       />
@@ -1168,6 +1308,43 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
           onToggleSelect: toggleBranchSelection,
         });
 
+      case "log-list":
+        return (
+          <LogListScreen
+            entries={logEntries}
+            loading={logLoading}
+            error={logError}
+            onBack={goBack}
+            onSelect={handleSelectLogEntry}
+            onCopy={handleCopyLogEntry}
+            onPickDate={handleOpenLogDates}
+            notification={logNotification}
+            version={version}
+            selectedDate={logSelectedDate}
+          />
+        );
+
+      case "log-detail":
+        return (
+          <LogDetailScreen
+            entry={logSelectedEntry}
+            onBack={goBack}
+            onCopy={handleCopyLogEntry}
+            notification={logNotification}
+            version={version}
+          />
+        );
+
+      case "log-date-picker":
+        return (
+          <LogDatePickerScreen
+            dates={logDates}
+            onBack={goBack}
+            onSelect={handleSelectLogDate}
+            version={version}
+          />
+        );
+
       case "branch-creator":
         return (
           <BranchCreatorScreen

package/src/cli/ui/components/screens/BranchListScreen.tsx

@@ -93,6 +93,7 @@ export interface BranchListScreenProps {
   onCleanupCommand?: () => void;
   onRefresh?: () => void;
   onOpenProfiles?: () => void;
+  onOpenLogs?: () => void;
   loading?: boolean;
   error?: Error | null;
   lastUpdated?: Date | null;
@@ -128,6 +129,7 @@ export const BranchListScreen = React.memo(function BranchListScreen({
   onCleanupCommand,
   onRefresh,
   onOpenProfiles,
+  onOpenLogs,
   loading = false,
   error = null,
   lastUpdated = null,
@@ -273,6 +275,8 @@ export const BranchListScreen = React.memo(function BranchListScreen({
       onRefresh();
     } else if (input === "p" && onOpenProfiles) {
       onOpenProfiles();
+    } else if (input === "l" && onOpenLogs) {
+      onOpenLogs();
     }
   });
 
@@ -346,6 +350,7 @@ export const BranchListScreen = React.memo(function BranchListScreen({
     { key: "r", description: "Refresh" },
     { key: "c", description: "Cleanup" },
     { key: "p", description: "Profiles" },
+    { key: "l", description: "Logs" },
   ];
 
   const formatLatestCommit = useCallback((timestamp?: number) => {
@@ -622,7 +627,7 @@ export const BranchListScreen = React.memo(function BranchListScreen({
             onChange={setFilterQuery}
             onSubmit={() => {}} // No-op: filter is applied in real-time
             placeholder="Type to search..."
-            blockKeys={["c", "r", "f"]} // Block shortcuts while typing
+            blockKeys={["c", "r", "f", "l"]} // Block shortcuts while typing
           />
         ) : (
           <Text dimColor>{filterQuery || "(press f to filter)"}</Text>

package/src/cli/ui/components/screens/LogDatePickerScreen.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { Header } from "../parts/Header.js";
+import { Footer } from "../parts/Footer.js";
+import { Select } from "../common/Select.js";
+import { useAppInput } from "../../hooks/useAppInput.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import type { LogFileInfo } from "../../../../logging/reader.js";
+
+interface DateItem {
+  label: string;
+  value: string;
+}
+
+export interface LogDatePickerScreenProps {
+  dates: LogFileInfo[];
+  onBack: () => void;
+  onSelect: (date: string) => void;
+  version?: string | null;
+}
+
+export function LogDatePickerScreen({
+  dates,
+  onBack,
+  onSelect,
+  version,
+}: LogDatePickerScreenProps) {
+  const { rows } = useTerminalSize();
+
+  useAppInput((input, key) => {
+    if (key.escape || input === "q") {
+      onBack();
+    }
+  });
+
+  const items: DateItem[] = dates.map((date) => ({
+    label: date.date,
+    value: date.date,
+  }));
+
+  const handleSelect = (item: DateItem) => {
+    onSelect(item.value);
+  };
+
+  const headerLines = 2;
+  const statsLines = 1;
+  const emptyLine = 1;
+  const footerLines = 1;
+  const fixedLines = headerLines + statsLines + emptyLine + footerLines;
+  const contentHeight = rows - fixedLines;
+  const limit = Math.max(5, contentHeight);
+
+  const footerActions = [
+    { key: "enter", description: "Select" },
+    { key: "esc", description: "Back" },
+  ];
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      <Header title="gwt - Log Date" titleColor="cyan" version={version} />
+
+      <Box marginTop={1}>
+        <Text>
+          Total: <Text bold>{dates.length}</Text>
+        </Text>
+      </Box>
+
+      <Box height={1} />
+
+      <Box flexDirection="column" flexGrow={1}>
+        {dates.length === 0 ? (
+          <Box>
+            <Text dimColor>ログがありません</Text>
+          </Box>
+        ) : (
+          <Select items={items} onSelect={handleSelect} limit={limit} />
+        )}
+      </Box>
+
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}

package/src/cli/ui/components/screens/LogDetailScreen.tsx

@@ -0,0 +1,67 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+import { Header } from "../parts/Header.js";
+import { Footer } from "../parts/Footer.js";
+import { useAppInput } from "../../hooks/useAppInput.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+import type { FormattedLogEntry } from "../../../../logging/formatter.js";
+
+export interface LogDetailScreenProps {
+  entry: FormattedLogEntry | null;
+  onBack: () => void;
+  onCopy: (entry: FormattedLogEntry) => void;
+  notification?: { message: string; tone: "success" | "error" } | null;
+  version?: string | null;
+}
+
+export function LogDetailScreen({
+  entry,
+  onBack,
+  onCopy,
+  notification,
+  version,
+}: LogDetailScreenProps) {
+  const { rows } = useTerminalSize();
+
+  useAppInput((input, key) => {
+    if (key.escape || input === "q") {
+      onBack();
+      return;
+    }
+
+    if (input === "c" && entry) {
+      onCopy(entry);
+    }
+  });
+
+  const jsonLines = useMemo<string[]>(() => {
+    if (!entry) return ["ログがありません"]; // fallback
+    return entry.json.split("\n");
+  }, [entry]);
+
+  const footerActions = [
+    { key: "c", description: "Copy" },
+    { key: "esc", description: "Back" },
+  ];
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      <Header title="gwt - Log Detail" titleColor="cyan" version={version} />
+
+      {notification ? (
+        <Box marginTop={1}>
+          <Text color={notification.tone === "error" ? "red" : "green"}>
+            {notification.message}
+          </Text>
+        </Box>
+      ) : null}
+      <Box flexDirection="column" flexGrow={1} marginTop={1}>
+        {jsonLines.map((line, index) => (
+          <Text key={`${line}-${index}`}>{line}</Text>
+        ))}
+      </Box>
+
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}