@akiojin/gwt 4.6.1 → 4.8.0

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) => {
@@ -787,7 +926,7 @@ export function App({ onExit, loadingIndicatorDelay = 300 }: AppProps) {
     if (selectedBranches.length === 0) {
       setCleanupIndicators({});
       setCleanupFooterMessage({
-        text: "クリーンアップ対象が選択されていません",
+        text: "No cleanup targets selected.",
         color: "yellow",
       });
       setCleanupInputLocked(false);
@@ -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

@@ -11,6 +11,7 @@ import { useAppInput } from "../../hooks/useAppInput.js";
 import { useTerminalSize } from "../../hooks/useTerminalSize.js";
 import type { BranchItem, Statistics, BranchViewMode } from "../../types.js";
 import type { ToolStatus } from "../../hooks/useToolStatus.js";
+import { getLatestActivityTimestamp } from "../../utils/branchFormatter.js";
 import stringWidth from "string-width";
 import stripAnsi from "strip-ansi";
 import chalk from "chalk";
@@ -93,6 +94,7 @@ export interface BranchListScreenProps {
   onCleanupCommand?: () => void;
   onRefresh?: () => void;
   onOpenProfiles?: () => void;
+  onOpenLogs?: () => void;
   loading?: boolean;
   error?: Error | null;
   lastUpdated?: Date | null;
@@ -128,6 +130,7 @@ export const BranchListScreen = React.memo(function BranchListScreen({
   onCleanupCommand,
   onRefresh,
   onOpenProfiles,
+  onOpenLogs,
   loading = false,
   error = null,
   lastUpdated = null,
@@ -273,6 +276,8 @@ export const BranchListScreen = React.memo(function BranchListScreen({
       onRefresh();
     } else if (input === "p" && onOpenProfiles) {
       onOpenProfiles();
+    } else if (input === "l" && onOpenLogs) {
+      onOpenLogs();
     }
   });
 
@@ -346,6 +351,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) => {
@@ -420,12 +426,11 @@ export const BranchListScreen = React.memo(function BranchListScreen({
       const columns = Math.max(20, context.columns - 1);
       const visibleWidth = (value: string) =>
         measureDisplayWidth(stripAnsi(value));
+      // FR-041: Display latest activity time (max of git commit and tool usage)
       let commitText = "---";
-      if (item.latestCommitTimestamp) {
-        commitText = formatLatestCommit(item.latestCommitTimestamp);
-      } else if (item.lastToolUsage?.timestamp) {
-        const seconds = Math.floor(item.lastToolUsage.timestamp / 1000);
-        commitText = formatLatestCommit(seconds);
+      const latestActivitySec = getLatestActivityTimestamp(item);
+      if (latestActivitySec > 0) {
+        commitText = formatLatestCommit(latestActivitySec);
       }
       const toolLabelRaw =
         item.lastToolUsageLabel?.split("|")?.[0]?.trim() ??
@@ -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>No logs available.</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 ["No logs available."]; // 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>
+  );
+}

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

@@ -0,0 +1,192 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Box, Text } from "ink";
+import stringWidth from "string-width";
+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 { FormattedLogEntry } from "../../../../logging/formatter.js";
+
+interface LogListItem {
+  label: string;
+  value: string;
+  entry: FormattedLogEntry;
+}
+
+export interface LogListScreenProps {
+  entries: FormattedLogEntry[];
+  loading?: boolean;
+  error?: string | null;
+  onBack: () => void;
+  onSelect: (entry: FormattedLogEntry) => void;
+  onCopy: (entry: FormattedLogEntry) => void;
+  onPickDate?: () => void;
+  notification?: { message: string; tone: "success" | "error" } | null;
+  version?: string | null;
+  selectedDate?: string | null;
+}
+
+const truncateToWidth = (value: string, maxWidth: number): string => {
+  if (maxWidth <= 0) return "";
+  if (stringWidth(value) <= maxWidth) return value;
+  const ellipsis = "…";
+  const ellipsisWidth = stringWidth(ellipsis);
+  if (ellipsisWidth >= maxWidth) return ellipsis;
+
+  let result = "";
+  for (const char of Array.from(value)) {
+    if (stringWidth(result + char) + ellipsisWidth > maxWidth) {
+      break;
+    }
+    result += char;
+  }
+  return result + ellipsis;
+};
+
+const padToWidth = (value: string, width: number): string => {
+  if (width <= 0) return "";
+  if (stringWidth(value) >= width) return value;
+  return value + " ".repeat(width - stringWidth(value));
+};
+
+export function LogListScreen({
+  entries,
+  loading = false,
+  error = null,
+  onBack,
+  onSelect,
+  onCopy,
+  onPickDate,
+  notification,
+  version,
+  selectedDate,
+}: LogListScreenProps) {
+  const { rows, columns } = useTerminalSize();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const maxLabelWidth = Math.max(10, columns - 2);
+
+  const items = useMemo<LogListItem[]>(
+    () =>
+      entries.map((entry) => ({
+        label: truncateToWidth(entry.summary, maxLabelWidth),
+        value: entry.id,
+        entry,
+      })),
+    [entries, maxLabelWidth],
+  );
+
+  const handleSelect = useCallback(
+    (item: LogListItem) => {
+      onSelect(item.entry);
+    },
+    [onSelect],
+  );
+
+  const handleCopy = useCallback(() => {
+    const entry = entries[selectedIndex];
+    if (entry) {
+      onCopy(entry);
+    }
+  }, [entries, selectedIndex, onCopy]);
+
+  useAppInput((input, key) => {
+    if (key.escape || input === "q") {
+      onBack();
+      return;
+    }
+
+    if (input === "c") {
+      handleCopy();
+      return;
+    }
+
+    if (input === "d" && onPickDate) {
+      onPickDate();
+    }
+  });
+
+  const renderItem = useCallback(
+    (item: LogListItem, isSelected: boolean) => {
+      if (!isSelected) {
+        return <Text>{item.label}</Text>;
+      }
+      const padded = padToWidth(item.label, maxLabelWidth);
+      const output = `\u001b[46m\u001b[30m${padded}\u001b[0m`;
+      return <Text>{output}</Text>;
+    },
+    [maxLabelWidth],
+  );
+
+  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: "Detail" },
+    { key: "c", description: "Copy" },
+    { key: "d", description: "Date" },
+    { key: "esc", description: "Back" },
+  ];
+
+  return (
+    <Box flexDirection="column" height={rows}>
+      <Header title="gwt - Log Viewer" titleColor="cyan" version={version} />
+
+      {notification ? (
+        <Box marginTop={1}>
+          <Text color={notification.tone === "error" ? "red" : "green"}>
+            {notification.message}
+          </Text>
+        </Box>
+      ) : null}
+
+      <Box marginTop={1}>
+        <Box marginRight={2}>
+          <Text>
+            Date: <Text bold>{selectedDate ?? "---"}</Text>
+          </Text>
+        </Box>
+        <Text>
+          Total: <Text bold>{entries.length}</Text>
+        </Text>
+      </Box>
+
+      <Box height={1} />
+
+      <Box flexDirection="column" flexGrow={1}>
+        {loading ? (
+          <Box>
+            <Text dimColor>Loading logs...</Text>
+          </Box>
+        ) : entries.length === 0 ? (
+          <Box>
+            <Text dimColor>No logs available.</Text>
+          </Box>
+        ) : (
+          <Select
+            items={items}
+            onSelect={handleSelect}
+            limit={limit}
+            selectedIndex={selectedIndex}
+            onSelectedIndexChange={setSelectedIndex}
+            renderItem={renderItem}
+          />
+        )}
+
+        {error ? (
+          <Box marginTop={1}>
+            <Text color="red">{error}</Text>
+          </Box>
+        ) : null}
+      </Box>
+
+      <Footer actions={footerActions} />
+    </Box>
+  );
+}