git-sync-tui 0.1.4 → 0.1.5

package/dist/cli.js

@@ -11,7 +11,7 @@ import { render } from "ink";
 import meow from "meow";
 
 // src/app.tsx
-import { useState as useState7, useEffect as useEffect4, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useState as useState7, useEffect as useEffect5, useRef as useRef3, useCallback as useCallback2 } from "react";
 import { Box as Box9, useApp } from "ink";
 import { Spinner as Spinner6 } from "@inkjs/ui";
 
@@ -32,14 +32,18 @@ function StepProgress({ current }) {
         " ",
         isActive ? /* @__PURE__ */ jsx(Text, { bold: true, children: label }) : label
       ] }),
-      !isLast && /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: " \u2500 " })
+      !isLast && /* @__PURE__ */ jsxs(Text, { color: isDone ? "green" : "gray", dimColor: !isDone, children: [
+        " ",
+        "\u2500\u2500\u2500",
+        " "
+      ] })
     ] }, label);
   }) });
 }
 function SectionHeader({ title, subtitle }) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
-      "\u25B8 ",
+      "\u25BE ",
       title
     ] }),
     subtitle && /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
@@ -50,10 +54,8 @@ function SectionHeader({ title, subtitle }) {
 }
 function KeyHints({ hints }) {
   return /* @__PURE__ */ jsx(Box, { gap: 1, flexWrap: "wrap", children: hints.map(({ key, label }) => /* @__PURE__ */ jsxs(Box, { children: [
-    /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: "[" }),
-    /* @__PURE__ */ jsx(Text, { color: "cyan", children: key }),
-    /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: "]" }),
-    /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
+    /* @__PURE__ */ jsx(Text, { backgroundColor: "gray", color: "white", bold: true, children: ` ${key} ` }),
+    /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
       " ",
       label
     ] })
@@ -61,7 +63,7 @@ function KeyHints({ hints }) {
 }
 function InlineKeys({ hints }) {
   return /* @__PURE__ */ jsx(Box, { gap: 1, children: hints.map(({ key, label }, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxs(Text, { color: "green", children: [
+    /* @__PURE__ */ jsxs(Text, { color: "green", bold: true, children: [
       "[",
       key,
       "]"
@@ -92,13 +94,12 @@ function StatusPanel({ type, title, children }) {
 }
 function AppHeader({ step, stashed }) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "\u25C7 " }),
-      /* @__PURE__ */ jsx(Text, { bold: true, children: "git-sync-tui" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: "  cherry-pick --no-commit" }),
-      stashed && /* @__PURE__ */ jsx(Text, { color: "yellow", children: " \u25AA stashed" })
+    /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+      /* @__PURE__ */ jsx(Text, { backgroundColor: "cyan", color: "white", bold: true, children: " git-sync-tui " }),
+      /* @__PURE__ */ jsx(Text, { color: "gray", children: "cherry-pick --no-commit" }),
+      stashed && /* @__PURE__ */ jsx(Text, { backgroundColor: "yellow", color: "white", bold: true, children: " STASHED " })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsxs(Box, { marginTop: 0, children: [
       /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: "  " }),
       /* @__PURE__ */ jsx(StepProgress, { current: step })
     ] })
@@ -158,28 +159,20 @@ async function addRemote(name, url) {
 }
 async function getRemoteBranches(remote2) {
   const git = getGit();
-  let fetchOk = false;
   try {
-    await git.fetch(remote2);
-    fetchOk = true;
+    const lsResult = await git.raw(["ls-remote", "--heads", remote2]);
+    if (lsResult.trim()) {
+      return lsResult.trim().split("\n").map((line) => line.replace(/^.*refs\/heads\//, "")).filter(Boolean).sort();
+    }
   } catch {
   }
   const result = await git.branch(["-r"]);
   const prefix = `${remote2}/`;
   const branches = result.all.filter((b) => b.startsWith(prefix) && !b.includes("HEAD")).map((b) => b.replace(prefix, "")).sort();
   if (branches.length > 0) return branches;
-  try {
-    const lsResult = await git.raw(["ls-remote", "--heads", remote2]);
-    if (!lsResult.trim()) return [];
-    return lsResult.trim().split("\n").map((line) => line.replace(/^.*refs\/heads\//, "")).filter(Boolean).sort();
-  } catch {
-    if (!fetchOk) {
-      throw new Error(`\u65E0\u6CD5\u8FDE\u63A5\u8FDC\u7A0B\u4ED3\u5E93 '${remote2}'\uFF0C\u8BF7\u68C0\u67E5\u7F51\u7EDC\u6216\u4ED3\u5E93\u5730\u5740`);
-    }
-    return [];
-  }
+  throw new Error(`\u65E0\u6CD5\u83B7\u53D6\u8FDC\u7A0B\u4ED3\u5E93 '${remote2}' \u7684\u5206\u652F\u5217\u8868\uFF0C\u8BF7\u68C0\u67E5\u7F51\u7EDC\u6216\u4ED3\u5E93\u5730\u5740`);
 }
-async function getCommits(remote2, branch2, count2 = 30) {
+async function getCommits(remote2, branch2, count2 = 100) {
   const git = getGit();
   const ref = `${remote2}/${branch2}`;
   try {
@@ -204,6 +197,27 @@ async function getCommits(remote2, branch2, count2 = 30) {
     return { hash, shortHash, message: message || "", author: author || "", date: date || "" };
   });
 }
+async function getUnsyncedCommits(remote2, branch2, count2 = 100) {
+  const git = getGit();
+  const ref = `${remote2}/${branch2}`;
+  const allCommits = await getCommits(remote2, branch2, count2);
+  try {
+    const result = await git.raw([
+      "cherry",
+      "HEAD",
+      ref
+    ]);
+    const unsyncedHashes = new Set(
+      result.trim().split("\n").filter((line) => line.startsWith("+ ")).map((line) => line.substring(2).trim())
+    );
+    return allCommits.map((c) => ({
+      ...c,
+      synced: !unsyncedHashes.has(c.hash)
+    }));
+  } catch {
+    return allCommits;
+  }
+}
 async function getMultiCommitStat(hashes) {
   if (hashes.length === 0) return "";
   const git = getGit();
@@ -393,10 +407,10 @@ function StashRecovery({ timestamp, onRecover, onSkip }) {
 // src/components/remote-select.tsx
 import { useState as useState3 } from "react";
 import { Box as Box4, Text as Text4, useInput as useInput3 } from "ink";
-import { Select, Spinner as Spinner2, TextInput } from "@inkjs/ui";
+import { Spinner as Spinner2, TextInput } from "@inkjs/ui";
 
 // src/hooks/use-git.ts
-import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
+import { useState as useState2, useEffect as useEffect2, useCallback, useRef } from "react";
 function useAsync(fn, deps = []) {
   const [state, setState] = useState2({
     data: null,
@@ -426,11 +440,49 @@ function useBranches(remote2) {
     [remote2]
   );
 }
-function useCommits(remote2, branch2, count2 = 30) {
-  return useAsync(
-    () => remote2 && branch2 ? getCommits(remote2, branch2, count2) : Promise.resolve([]),
-    [remote2, branch2, count2]
-  );
+function useCommits(remote2, branch2, pageSize = 100) {
+  const [data, setData] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [loadingMore, setLoadingMore] = useState2(false);
+  const [error2, setError] = useState2(null);
+  const [hasMore, setHasMore] = useState2(true);
+  const loadedRef = useRef(0);
+  useEffect2(() => {
+    if (!remote2 || !branch2) {
+      setData([]);
+      setLoading(false);
+      setHasMore(false);
+      return;
+    }
+    setData(null);
+    setLoading(true);
+    setError(null);
+    setHasMore(true);
+    loadedRef.current = 0;
+    getUnsyncedCommits(remote2, branch2, pageSize).then((commits2) => {
+      setData(commits2);
+      setLoading(false);
+      loadedRef.current = commits2.length;
+      setHasMore(commits2.length >= pageSize);
+    }).catch((err) => {
+      setError(err.message);
+      setLoading(false);
+    });
+  }, [remote2, branch2, pageSize]);
+  const loadMore = useCallback(async () => {
+    if (!remote2 || !branch2 || loadingMore || !hasMore) return;
+    setLoadingMore(true);
+    try {
+      const nextCount = loadedRef.current + pageSize;
+      const allCommits = await getUnsyncedCommits(remote2, branch2, nextCount);
+      setData(allCommits);
+      setHasMore(allCommits.length >= nextCount);
+      loadedRef.current = allCommits.length;
+    } catch {
+    }
+    setLoadingMore(false);
+  }, [remote2, branch2, pageSize, loadingMore, hasMore]);
+  return { data, loading, loadingMore, error: error2, hasMore, loadMore };
 }
 function useCommitStat(hashes) {
   const [stat, setStat] = useState2("");
@@ -462,16 +514,32 @@ function extractRemoteName(url) {
 function RemoteSelect({ onSelect, onBack }) {
   const { data: remotes, loading, error: error2, reload } = useRemotes();
   const [phase, setPhase] = useState3("list");
+  const [cursorIndex, setCursorIndex] = useState3(0);
   const [customUrl, setCustomUrl] = useState3("");
   const [addError, setAddError] = useState3(null);
-  useInput3((_input, key) => {
+  const totalItems = (remotes?.length || 0) + 1;
+  useInput3((input, key) => {
+    if (phase !== "list") {
+      if (key.escape) {
+        if (phase === "input-name") {
+          setPhase("input-url");
+        } else if (phase === "input-url") {
+          setPhase("list");
+        }
+      }
+      return;
+    }
     if (key.escape) {
-      if (phase === "input-name") {
+      onBack?.();
+    } else if (key.upArrow) {
+      setCursorIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setCursorIndex((prev) => Math.min(totalItems - 1, prev + 1));
+    } else if (key.return) {
+      if (remotes && cursorIndex < remotes.length) {
+        onSelect(remotes[cursorIndex].name);
+      } else {
         setPhase("input-url");
-      } else if (phase === "input-url") {
-        setPhase("list");
-      } else if (phase === "list") {
-        onBack?.();
       }
     }
   });
@@ -480,7 +548,8 @@ function RemoteSelect({ onSelect, onBack }) {
   }
   if (error2) {
     return /* @__PURE__ */ jsxs4(Text4, { color: "red", children: [
-      "\u2716 \u83B7\u53D6\u8FDC\u7A0B\u4ED3\u5E93\u5931\u8D25: ",
+      "\u2716 ",
+      "\u83B7\u53D6\u8FDC\u7A0B\u4ED3\u5E93\u5931\u8D25: ",
       error2
     ] });
   }
@@ -511,7 +580,10 @@ function RemoteSelect({ onSelect, onBack }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx4(Text4, { color: "gray", dimColor: true, children: "  \u652F\u6301 HTTPS / SSH \u5730\u5740" })
+      /* @__PURE__ */ jsxs4(Text4, { color: "gray", dimColor: true, children: [
+        "  ",
+        "\u652F\u6301 HTTPS / SSH \u5730\u5740"
+      ] })
     ] });
   }
   if (phase === "input-name") {
@@ -555,99 +627,187 @@ function RemoteSelect({ onSelect, onBack }) {
       ] })
     ] });
   }
-  const options = [
-    ...(remotes || []).map((r) => ({
-      label: `${r.name}  ${r.fetchUrl}`,
-      value: r.name
-    })),
-    {
-      label: "+ \u6DFB\u52A0\u8FDC\u7A0B\u4ED3\u5E93...",
-      value: "__add_custom__"
-    }
-  ];
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, children: [
+  const maxNameLen = Math.max(...(remotes || []).map((r) => r.name.length), 0);
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx4(SectionHeader, { title: "\u9009\u62E9\u8FDC\u7A0B\u4ED3\u5E93" }),
-    /* @__PURE__ */ jsx4(
-      Select,
-      {
-        options,
-        onChange: (value) => {
-          if (value === "__add_custom__") {
-            setPhase("input-url");
-          } else {
-            onSelect(value);
-          }
-        }
-      }
-    )
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: 1, children: [
+      (remotes || []).map((r, i) => {
+        const isCursor = i === cursorIndex;
+        return /* @__PURE__ */ jsxs4(Box4, { children: [
+          /* @__PURE__ */ jsx4(Text4, { color: isCursor ? "cyan" : "gray", children: isCursor ? "\u203A" : " " }),
+          /* @__PURE__ */ jsx4(Text4, { children: " " }),
+          /* @__PURE__ */ jsx4(Text4, { color: isCursor ? "cyan" : "white", bold: isCursor, children: r.name.padEnd(maxNameLen + 2) }),
+          /* @__PURE__ */ jsx4(Text4, { color: "gray", dimColor: true, children: r.fetchUrl })
+        ] }, r.name);
+      }),
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsx4(Text4, { color: cursorIndex === (remotes?.length || 0) ? "cyan" : "gray", children: cursorIndex === (remotes?.length || 0) ? "\u203A" : " " }),
+        /* @__PURE__ */ jsx4(Text4, { children: " " }),
+        /* @__PURE__ */ jsx4(Text4, { color: "green", dimColor: cursorIndex !== (remotes?.length || 0), children: "+ \u6DFB\u52A0\u8FDC\u7A0B\u4ED3\u5E93..." })
+      ] })
+    ] })
   ] });
 }
 
 // src/components/branch-select.tsx
 import { useState as useState4, useMemo } from "react";
 import { Box as Box5, Text as Text5, useInput as useInput4 } from "ink";
-import { Select as Select2, Spinner as Spinner3, TextInput as TextInput2 } from "@inkjs/ui";
+import { Spinner as Spinner3, TextInput as TextInput2 } from "@inkjs/ui";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function BranchSelect({ remote: remote2, onSelect, onBack }) {
   const { data: branches, loading, error: error2 } = useBranches(remote2);
   const [filter, setFilter] = useState4("");
-  useInput4((_input, key) => {
-    if (key.escape) onBack?.();
-  });
-  const filteredOptions = useMemo(() => {
+  const [cursorIndex, setCursorIndex] = useState4(0);
+  const filteredBranches = useMemo(() => {
     if (!branches) return [];
-    const filtered = filter ? branches.filter((b) => b.toLowerCase().includes(filter.toLowerCase())) : branches;
-    return filtered.map((b) => ({ label: b, value: b }));
+    return filter ? branches.filter((b) => b.toLowerCase().includes(filter.toLowerCase())) : branches;
   }, [branches, filter]);
+  const visibleCount = 10;
+  const startIdx = Math.max(0, Math.min(cursorIndex - Math.floor(visibleCount / 2), filteredBranches.length - visibleCount));
+  const visibleBranches = filteredBranches.slice(startIdx, startIdx + visibleCount);
+  useInput4((input, key) => {
+    if (key.escape) {
+      onBack?.();
+    } else if (key.upArrow) {
+      setCursorIndex((prev) => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setCursorIndex((prev) => Math.min(filteredBranches.length - 1, prev + 1));
+    } else if (key.return) {
+      if (filteredBranches.length > 0) {
+        onSelect(filteredBranches[cursorIndex]);
+      }
+    }
+  });
   if (loading) {
     return /* @__PURE__ */ jsx5(Spinner3, { label: `\u83B7\u53D6 ${remote2} \u7684\u5206\u652F\u5217\u8868...` });
   }
   if (error2) {
     return /* @__PURE__ */ jsxs5(Text5, { color: "red", children: [
-      "\u2716 \u83B7\u53D6\u5206\u652F\u5217\u8868\u5931\u8D25: ",
+      "\u2716 ",
+      "\u83B7\u53D6\u5206\u652F\u5217\u8868\u5931\u8D25: ",
       error2
     ] });
   }
   if (!branches || branches.length === 0) {
-    return /* @__PURE__ */ jsx5(Text5, { color: "red", children: "\u2716 \u672A\u627E\u5230\u8FDC\u7A0B\u5206\u652F" });
+    return /* @__PURE__ */ jsxs5(Text5, { color: "red", children: [
+      "\u2716 ",
+      "\u672A\u627E\u5230\u8FDC\u7A0B\u5206\u652F"
+    ] });
   }
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx5(SectionHeader, { title: `\u9009\u62E9\u5206\u652F`, subtitle: `${remote2} \xB7 ${branches.length} \u4E2A\u5206\u652F` }),
-    /* @__PURE__ */ jsxs5(Box5, { children: [
-      /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "/ " }),
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5(SectionHeader, { title: "\u9009\u62E9\u5206\u652F", subtitle: `${remote2} \xB7 ${branches.length} \u4E2A\u5206\u652F` }),
+    /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, children: [
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "/ " }),
       /* @__PURE__ */ jsx5(
         TextInput2,
         {
           placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FC7\u6EE4...",
-          onChange: setFilter
+          onChange: (val) => {
+            setFilter(val);
+            setCursorIndex(0);
+          }
         }
       ),
       filter && /* @__PURE__ */ jsxs5(Text5, { color: "gray", dimColor: true, children: [
         " \xB7 \u5339\u914D ",
-        filteredOptions.length
+        filteredBranches.length
       ] })
     ] }),
-    filteredOptions.length > 0 ? /* @__PURE__ */ jsx5(Select2, { options: filteredOptions, onChange: onSelect }) : /* @__PURE__ */ jsx5(Text5, { color: "yellow", children: "\u25B2 \u65E0\u5339\u914D\u5206\u652F" })
+    filteredBranches.length > 0 ? /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginTop: 1, children: [
+      startIdx > 0 && /* @__PURE__ */ jsxs5(Text5, { color: "gray", dimColor: true, children: [
+        "  ",
+        "\u2191 ",
+        startIdx,
+        " more"
+      ] }),
+      visibleBranches.map((b, i) => {
+        const actualIdx = startIdx + i;
+        const isCursor = actualIdx === cursorIndex;
+        return /* @__PURE__ */ jsxs5(Box5, { children: [
+          /* @__PURE__ */ jsx5(Text5, { color: isCursor ? "cyan" : "gray", children: isCursor ? "\u203A" : " " }),
+          /* @__PURE__ */ jsx5(Text5, { children: " " }),
+          /* @__PURE__ */ jsx5(Text5, { color: isCursor ? "cyan" : "white", bold: isCursor, children: b })
+        ] }, b);
+      }),
+      startIdx + visibleCount < filteredBranches.length && /* @__PURE__ */ jsxs5(Text5, { color: "gray", dimColor: true, children: [
+        "  ",
+        "\u2193 ",
+        filteredBranches.length - startIdx - visibleCount,
+        " more"
+      ] })
+    ] }) : /* @__PURE__ */ jsxs5(Text5, { color: "yellow", children: [
+      "\u25B2 ",
+      "\u65E0\u5339\u914D\u5206\u652F"
+    ] })
   ] });
 }
 
 // src/components/commit-list.tsx
-import { useState as useState5, useMemo as useMemo2, useRef } from "react";
+import { useState as useState5, useMemo as useMemo2, useRef as useRef2, useEffect as useEffect3 } from "react";
 import { Box as Box6, Text as Text6, useInput as useInput5 } from "ink";
 import { Spinner as Spinner4 } from "@inkjs/ui";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function StatPanel({ stat, loading, count: count2 }) {
+  const STAT_HEIGHT = 8;
+  const [scrollOffset, setScrollOffset] = useState5(0);
+  const lines = useMemo2(() => stat ? stat.split("\n") : [], [stat]);
+  const canScroll = lines.length > STAT_HEIGHT;
+  useEffect3(() => {
+    setScrollOffset(0);
+  }, [stat]);
+  useInput5((input) => {
+    if (!canScroll) return;
+    if (input === "j") {
+      setScrollOffset((prev) => Math.min(prev + 1, lines.length - STAT_HEIGHT));
+    } else if (input === "k") {
+      setScrollOffset((prev) => Math.max(0, prev - 1));
+    }
+  });
+  const visibleLines = canScroll ? lines.slice(scrollOffset, scrollOffset + STAT_HEIGHT) : lines;
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs6(Box6, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs6(Text6, { bold: true, color: "cyan", children: [
+        "\u25C6 ",
+        "\u5DF2\u9009 ",
+        count2,
+        " \u4E2A commit \xB7 diff --stat"
+      ] }),
+      canScroll && /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
+        scrollOffset + 1,
+        "-",
+        Math.min(scrollOffset + STAT_HEIGHT, lines.length),
+        "/",
+        lines.length,
+        " [j/k]"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6(Box6, { flexDirection: "column", height: STAT_HEIGHT, children: loading ? /* @__PURE__ */ jsx6(Spinner4, { label: "\u52A0\u8F7D\u4E2D..." }) : visibleLines.length > 0 ? visibleLines.map((line, i) => /* @__PURE__ */ jsx6(Text6, { color: "gray", children: line }, scrollOffset + i)) : /* @__PURE__ */ jsx6(Text6, { color: "gray", dimColor: true, children: "(\u65E0\u53D8\u66F4)" }) })
+  ] });
+}
 function CommitList({ remote: remote2, branch: branch2, onSelect, onBack }) {
-  const { data: commits2, loading, error: error2 } = useCommits(remote2, branch2, 30);
+  const { data: commits2, loading, loadingMore, error: error2, hasMore, loadMore } = useCommits(remote2, branch2, 100);
   const [selectedIndex, setSelectedIndex] = useState5(0);
   const [selectedHashes, setSelectedHashes] = useState5(/* @__PURE__ */ new Set());
   const [shiftMode, setShiftMode] = useState5(false);
-  const anchorIndexRef = useRef(null);
+  const anchorIndexRef = useRef2(null);
   const selectedKey = useMemo2(() => Array.from(selectedHashes).sort().join(","), [selectedHashes]);
   const selectedArray = useMemo2(() => Array.from(selectedHashes), [selectedKey]);
   const { stat, loading: statLoading } = useCommitStat(selectedArray);
+  const syncedCount = useMemo2(() => {
+    if (!commits2) return 0;
+    return commits2.filter((c) => c.synced).length;
+  }, [commits2]);
+  useEffect3(() => {
+    if (!commits2 || !hasMore || loadingMore) return;
+    if (selectedIndex >= commits2.length - 5) {
+      loadMore();
+    }
+  }, [selectedIndex, commits2?.length, hasMore, loadingMore, loadMore]);
   const toggleCurrent = () => {
     if (!commits2 || commits2.length === 0) return;
-    const hash = commits2[selectedIndex].hash;
+    const commit = commits2[selectedIndex];
+    if (commit.synced) return;
+    const hash = commit.hash;
     setSelectedHashes((prev) => {
       const next = new Set(prev);
       if (next.has(hash)) {
@@ -667,19 +827,22 @@ function CommitList({ remote: remote2, branch: branch2, onSelect, onBack }) {
     setSelectedHashes((prev) => {
       const next = new Set(prev);
       for (let i = start; i <= end; i++) {
-        next.add(commits2[i].hash);
+        if (!commits2[i].synced) {
+          next.add(commits2[i].hash);
+        }
       }
       return next;
     });
   };
   const toggleAll = () => {
     if (!commits2 || commits2.length === 0) return;
+    const unsyncedCommits = commits2.filter((c) => !c.synced);
     setSelectedHashes((prev) => {
-      if (prev.size === commits2.length) {
+      if (prev.size === unsyncedCommits.length) {
         anchorIndexRef.current = null;
         return /* @__PURE__ */ new Set();
       }
-      return new Set(commits2.map((c) => c.hash));
+      return new Set(unsyncedCommits.map((c) => c.hash));
     });
   };
   const invertSelection = () => {
@@ -687,7 +850,7 @@ function CommitList({ remote: remote2, branch: branch2, onSelect, onBack }) {
     setSelectedHashes((prev) => {
       const next = /* @__PURE__ */ new Set();
       for (const c of commits2) {
-        if (!prev.has(c.hash)) next.add(c.hash);
+        if (!c.synced && !prev.has(c.hash)) next.add(c.hash);
       }
       return next;
     });
@@ -697,7 +860,9 @@ function CommitList({ remote: remote2, branch: branch2, onSelect, onBack }) {
     setSelectedHashes((prev) => {
       const next = new Set(prev);
       for (let i = 0; i <= selectedIndex; i++) {
-        next.add(commits2[i].hash);
+        if (!commits2[i].synced) {
+          next.add(commits2[i].hash);
+        }
       }
       return next;
     });
@@ -754,16 +919,21 @@ function CommitList({ remote: remote2, branch: branch2, onSelect, onBack }) {
   }
   if (error2) {
     return /* @__PURE__ */ jsxs6(Text6, { color: "red", children: [
-      "\u2716 \u83B7\u53D6 commit \u5217\u8868\u5931\u8D25: ",
+      "\u2716 ",
+      "\u83B7\u53D6 commit \u5217\u8868\u5931\u8D25: ",
       error2
     ] });
   }
   if (!commits2 || commits2.length === 0) {
-    return /* @__PURE__ */ jsx6(Text6, { color: "yellow", children: "\u25B2 \u8BE5\u5206\u652F\u6CA1\u6709 commit" });
+    return /* @__PURE__ */ jsxs6(Text6, { color: "yellow", children: [
+      "\u25B2 ",
+      "\u8BE5\u5206\u652F\u6CA1\u6709 commit"
+    ] });
   }
   const visibleCount = 10;
   const startIdx = Math.max(0, Math.min(selectedIndex - Math.floor(visibleCount / 2), commits2.length - visibleCount));
   const visibleCommits = commits2.slice(startIdx, startIdx + visibleCount);
+  const unsyncedTotal = commits2.length - syncedCount;
   return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
     /* @__PURE__ */ jsx6(SectionHeader, { title: "\u9009\u62E9\u8981\u540C\u6B65\u7684 commit" }),
     /* @__PURE__ */ jsxs6(Box6, { gap: 2, children: [
@@ -774,17 +944,28 @@ function CommitList({ remote: remote2, branch: branch2, onSelect, onBack }) {
       ] }),
       /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
         commits2.length,
-        " commits"
+        " commits",
+        hasMore ? "+" : ""
+      ] }),
+      syncedCount > 0 && /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
+        syncedCount,
+        " \u5DF2\u540C\u6B65"
+      ] }),
+      /* @__PURE__ */ jsxs6(Text6, { color: "green", children: [
+        unsyncedTotal,
+        " \u5F85\u540C\u6B65"
       ] }),
       /* @__PURE__ */ jsxs6(Text6, { color: selectedHashes.size > 0 ? "cyan" : "gray", bold: selectedHashes.size > 0, children: [
         "\u5DF2\u9009 ",
         selectedHashes.size
       ] }),
-      shiftMode && /* @__PURE__ */ jsx6(Text6, { color: "yellow", bold: true, children: "SHIFT" })
+      shiftMode && /* @__PURE__ */ jsx6(Text6, { color: "yellow", bold: true, children: "SHIFT" }),
+      loadingMore && /* @__PURE__ */ jsx6(Text6, { color: "gray", dimColor: true, children: "\u52A0\u8F7D\u4E2D..." })
     ] }),
     /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
       startIdx > 0 && /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
-        "  \u2191 ",
+        "  ",
+        "\u2191 ",
         startIdx,
         " more"
       ] }),
@@ -793,30 +974,60 @@ function CommitList({ remote: remote2, branch: branch2, onSelect, onBack }) {
         const isSelected = selectedHashes.has(c.hash);
         const isCursor = actualIdx === selectedIndex;
         const isAnchor = actualIdx === anchorIndexRef.current;
+        const isSynced = !!c.synced;
         return /* @__PURE__ */ jsxs6(Box6, { children: [
-          /* @__PURE__ */ jsxs6(Text6, { backgroundColor: isCursor ? "blue" : void 0, color: isSelected ? "green" : "white", children: [
-            isCursor ? "\u25B8 " : "  ",
-            isAnchor ? "\u2693" : isSelected ? "\u25CF" : "\u25CB",
-            " "
-          ] }),
-          /* @__PURE__ */ jsx6(Text6, { backgroundColor: isCursor ? "blue" : void 0, color: "yellow", children: c.shortHash }),
-          /* @__PURE__ */ jsxs6(Text6, { backgroundColor: isCursor ? "blue" : void 0, color: isSelected ? "green" : "white", children: [
-            " ",
-            c.message
-          ] }),
+          /* @__PURE__ */ jsxs6(
+            Text6,
+            {
+              backgroundColor: isCursor ? isSynced ? "gray" : "blue" : void 0,
+              color: isSynced ? "gray" : isSelected ? "green" : "white",
+              dimColor: isSynced,
+              children: [
+                isCursor ? "\u25B8 " : "  ",
+                isSynced ? "\u2713" : isAnchor ? "\u2693" : isSelected ? "\u25CF" : "\u25CB",
+                " "
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            Text6,
+            {
+              backgroundColor: isCursor ? isSynced ? "gray" : "blue" : void 0,
+              color: isSynced ? "gray" : "yellow",
+              dimColor: isSynced,
+              children: c.shortHash
+            }
+          ),
+          /* @__PURE__ */ jsxs6(
+            Text6,
+            {
+              backgroundColor: isCursor ? isSynced ? "gray" : "blue" : void 0,
+              color: isSynced ? "gray" : isSelected ? "green" : "white",
+              dimColor: isSynced,
+              children: [
+                " ",
+                c.message
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
             " ",
             c.author,
             " \xB7 ",
             c.date
-          ] })
+          ] }),
+          isSynced && /* @__PURE__ */ jsx6(Text6, { color: "gray", dimColor: true, children: " [\u5DF2\u540C\u6B65]" })
         ] }, c.hash);
       }),
-      startIdx + visibleCount < commits2.length && /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
-        "  \u2193 ",
+      startIdx + visibleCount < commits2.length ? /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
+        "  ",
+        "\u2193 ",
         commits2.length - startIdx - visibleCount,
         " more"
-      ] })
+      ] }) : hasMore ? /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
+        "  ",
+        "\u2193 \u6EDA\u52A8\u52A0\u8F7D\u66F4\u591A..."
+      ] }) : null
     ] }),
     /* @__PURE__ */ jsx6(KeyHints, { hints: [
       { key: "\u2191\u2193", label: "\u5BFC\u822A" },
@@ -828,7 +1039,7 @@ function CommitList({ remote: remote2, branch: branch2, onSelect, onBack }) {
       { key: "Enter", label: "\u786E\u8BA4" },
       { key: "Esc", label: "\u8FD4\u56DE" }
     ] }),
-    selectedHashes.size > 0 && /* @__PURE__ */ jsx6(StatusPanel, { type: "info", title: `\u5DF2\u9009 ${selectedHashes.size} \u4E2A commit \xB7 diff --stat`, children: statLoading ? /* @__PURE__ */ jsx6(Spinner4, { label: "\u52A0\u8F7D\u4E2D..." }) : /* @__PURE__ */ jsx6(Text6, { color: "gray", children: stat || "(\u65E0\u53D8\u66F4)" }) })
+    selectedHashes.size > 0 && /* @__PURE__ */ jsx6(StatPanel, { stat, loading: statLoading, count: selectedHashes.size })
   ] });
 }
 
@@ -890,7 +1101,7 @@ function ConfirmPanel({ commits: commits2, selectedHashes, hasMerge, useMainline
 }
 
 // src/components/result-panel.tsx
-import { useState as useState6, useEffect as useEffect3 } from "react";
+import { useState as useState6, useEffect as useEffect4 } from "react";
 import { Box as Box8, Text as Text8 } from "ink";
 import { Spinner as Spinner5 } from "@inkjs/ui";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -907,7 +1118,7 @@ function ResultPanel({ selectedHashes, useMainline, stashed, onStashRestored, on
     if (ok) onStashRestored();
     return ok;
   };
-  useEffect3(() => {
+  useEffect4(() => {
     async function run() {
       const res = await cherryPick(selectedHashes, useMainline);
       setResult(res);
@@ -994,10 +1205,10 @@ function App({ initialRemote, initialBranch }) {
   const [useMainline, setUseMainline] = useState7(false);
   const [stashed, setStashed] = useState7(false);
   const [guardTimestamp, setGuardTimestamp] = useState7();
-  const stashedRef = useRef2(false);
-  const stashRestoredRef = useRef2(false);
-  const mountedRef = useRef2(true);
-  const debounceTimer = useRef2(null);
+  const stashedRef = useRef3(false);
+  const stashRestoredRef = useRef3(false);
+  const mountedRef = useRef3(true);
+  const debounceTimer = useRef3(null);
   const setStep = useCallback2((newStep) => {
     setInputReady(false);
     setStepRaw(newStep);
@@ -1024,7 +1235,7 @@ function App({ initialRemote, initialBranch }) {
     stashRestoredRef.current = true;
     removeStashGuard();
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     mountedRef.current = true;
     async function check() {
       const guard = await checkStashGuard();
@@ -1350,7 +1561,7 @@ var cli = meow(
     -r, --remote <name>       \u6307\u5B9A\u8FDC\u7A0B\u4ED3\u5E93\u540D\u79F0
     -b, --branch <name>       \u6307\u5B9A\u8FDC\u7A0B\u5206\u652F\u540D\u79F0
     -c, --commits <hashes>    \u6307\u5B9A commit hash\uFF08\u9017\u53F7\u5206\u9694\uFF09
-    -n, --count <number>      \u663E\u793A commit \u6570\u91CF\uFF08\u9ED8\u8BA4 30\uFF09
+    -n, --count <number>      \u663E\u793A commit \u6570\u91CF\uFF08\u9ED8\u8BA4 100\uFF09
     -m, --mainline            \u5BF9 merge commit \u4F7F\u7528 -m 1
     -y, --yes                 \u8DF3\u8FC7\u786E\u8BA4\u76F4\u63A5\u6267\u884C
     --no-stash                \u8DF3\u8FC7 stash \u63D0\u793A
@@ -1386,7 +1597,7 @@ var cli = meow(
       remote: { type: "string", shortFlag: "r" },
       branch: { type: "string", shortFlag: "b" },
       commits: { type: "string", shortFlag: "c" },
-      count: { type: "number", shortFlag: "n", default: 30 },
+      count: { type: "number", shortFlag: "n", default: 100 },
       mainline: { type: "boolean", shortFlag: "m", default: false },
       yes: { type: "boolean", shortFlag: "y", default: false },
       noStash: { type: "boolean", default: false },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "git-sync-tui",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "packageManager": "pnpm@10.32.1",
   "description": "Interactive TUI tool for cross-repo git commit synchronization (cherry-pick --no-commit)",
   "author": "KiWi233333",