git-sync-tui 0.1.2 → 0.1.3

package/dist/cli.js

@@ -1,17 +1,113 @@
 #!/usr/bin/env node
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/cli.tsx
 import { render } from "ink";
 import meow from "meow";
 
 // src/app.tsx
-import { useState as useState6, useEffect as useEffect3, useRef as useRef2, useCallback as useCallback2 } from "react";
-import { Box as Box7, Text as Text7, useApp } from "ink";
-import { Spinner as Spinner5 } from "@inkjs/ui";
+import { useState as useState7, useEffect as useEffect4, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { Box as Box9, useApp } from "ink";
+import { Spinner as Spinner6 } from "@inkjs/ui";
 
-// src/components/stash-prompt.tsx
-import { Box, Text, useInput } from "ink";
+// src/components/ui.tsx
+import React from "react";
+import { Box, Text } from "ink";
 import { jsx, jsxs } from "react/jsx-runtime";
+var STEP_LABELS = ["Remote", "Branch", "Commits", "Confirm", "Sync"];
+function StepProgress({ current }) {
+  return /* @__PURE__ */ jsx(Box, { children: STEP_LABELS.map((label, i) => {
+    const step = i + 1;
+    const isActive = step === current;
+    const isDone = step < current;
+    const isLast = i === STEP_LABELS.length - 1;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsxs(Text, { color: isActive ? "cyan" : isDone ? "green" : "gray", dimColor: !isActive && !isDone, children: [
+        isDone ? "\u25CF" : isActive ? "\u25C6" : "\u25CB",
+        " ",
+        isActive ? /* @__PURE__ */ jsx(Text, { bold: true, children: label }) : label
+      ] }),
+      !isLast && /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: " \u2500 " })
+    ] }, label);
+  }) });
+}
+function SectionHeader({ title, subtitle }) {
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs(Text, { bold: true, color: "cyan", children: [
+      "\u25B8 ",
+      title
+    ] }),
+    subtitle && /* @__PURE__ */ jsxs(Text, { color: "gray", dimColor: true, children: [
+      "  ",
+      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: [
+      " ",
+      label
+    ] })
+  ] }, key)) });
+}
+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: [
+      "[",
+      key,
+      "]"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { children: [
+      " ",
+      label
+    ] }),
+    i < hints.length - 1 && /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: " / " })
+  ] }, key)) });
+}
+var PANEL_CONFIG = {
+  info: { icon: "\u25C6", color: "cyan", borderColor: "cyan" },
+  warn: { icon: "\u25B2", color: "yellow", borderColor: "yellow" },
+  error: { icon: "\u2716", color: "red", borderColor: "red" },
+  success: { icon: "\u2714", color: "green", borderColor: "green" }
+};
+function StatusPanel({ type, title, children }) {
+  const { icon, color, borderColor } = PANEL_CONFIG[type];
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor, paddingX: 1, children: [
+    /* @__PURE__ */ jsxs(Text, { bold: true, color, children: [
+      icon,
+      " ",
+      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, { children: [
+      /* @__PURE__ */ jsx(Text, { color: "gray", dimColor: true, children: "  " }),
+      /* @__PURE__ */ jsx(StepProgress, { current: step })
+    ] })
+  ] });
+}
+
+// src/components/stash-prompt.tsx
+import { Box as Box2, Text as Text2, useInput } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function StashPrompt({ onConfirm, onSkip }) {
   useInput((input) => {
     if (input === "y" || input === "Y") {
@@ -20,31 +116,27 @@ function StashPrompt({ onConfirm, onSkip }) {
       onSkip();
     }
   });
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsxs(Box, { borderStyle: "single", borderColor: "yellow", paddingX: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: "\u68C0\u6D4B\u5230\u5DE5\u4F5C\u533A\u6709\u672A\u63D0\u4EA4\u7684\u53D8\u66F4" }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: "Cherry-pick \u64CD\u4F5C\u53EF\u80FD\u4F1A\u4E0E\u672A\u63D0\u4EA4\u7684\u5185\u5BB9\u51B2\u7A81" })
-    ] }),
-    /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Text, { bold: true, children: "\u662F\u5426\u81EA\u52A8 stash \u4FDD\u5B58\u5F53\u524D\u53D8\u66F4? " }),
-      /* @__PURE__ */ jsx(Text, { color: "green", children: "[y]" }),
-      /* @__PURE__ */ jsx(Text, { children: " \u662F / " }),
-      /* @__PURE__ */ jsx(Text, { color: "red", children: "[n]" }),
-      /* @__PURE__ */ jsx(Text, { children: " \u5426\uFF0C\u7EE7\u7EED\u64CD\u4F5C" })
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx2(StatusPanel, { type: "warn", title: "\u5DE5\u4F5C\u533A\u6709\u672A\u63D0\u4EA4\u7684\u53D8\u66F4", children: /* @__PURE__ */ jsx2(Text2, { color: "gray", children: "  Cherry-pick \u64CD\u4F5C\u53EF\u80FD\u4F1A\u4E0E\u672A\u63D0\u4EA4\u7684\u5185\u5BB9\u51B2\u7A81" }) }),
+    /* @__PURE__ */ jsxs2(Box2, { children: [
+      /* @__PURE__ */ jsx2(Text2, { bold: true, children: "\u81EA\u52A8 stash \u4FDD\u5B58\u5F53\u524D\u53D8\u66F4? " }),
+      /* @__PURE__ */ jsx2(InlineKeys, { hints: [
+        { key: "y", label: "\u662F" },
+        { key: "n", label: "\u5426\uFF0C\u7EE7\u7EED" }
+      ] })
     ] })
   ] });
 }
 
-// src/components/remote-select.tsx
-import { useState as useState2 } from "react";
-import { Box as Box2, Text as Text2 } from "ink";
-import { Select, Spinner, TextInput } from "@inkjs/ui";
-
-// src/hooks/use-git.ts
-import { useState, useEffect, useCallback } from "react";
+// src/components/stash-recovery.tsx
+import { useState, useEffect } from "react";
+import { Box as Box3, Text as Text3, useInput as useInput2 } from "ink";
+import { Spinner } from "@inkjs/ui";
 
 // src/utils/git.ts
 import simpleGit from "simple-git";
+import { existsSync, writeFileSync, unlinkSync, readFileSync } from "fs";
+import { join } from "path";
 var gitInstance = null;
 function getGit(cwd) {
   if (!gitInstance || cwd) {
@@ -183,10 +275,115 @@ async function stashPop() {
     return false;
   }
 }
+var STASH_GUARD_FILE = "git-sync-tui-stash-guard";
+async function getGitDir() {
+  const git = getGit();
+  const dir = await git.revparse(["--git-dir"]);
+  return dir.trim();
+}
+async function writeStashGuard() {
+  try {
+    const gitDir = await getGitDir();
+    writeFileSync(join(gitDir, STASH_GUARD_FILE), (/* @__PURE__ */ new Date()).toISOString(), "utf-8");
+  } catch {
+  }
+}
+async function removeStashGuard() {
+  try {
+    const gitDir = await getGitDir();
+    const guardPath = join(gitDir, STASH_GUARD_FILE);
+    if (existsSync(guardPath)) {
+      unlinkSync(guardPath);
+    }
+  } catch {
+  }
+}
+function removeStashGuardSync() {
+  try {
+    const { execSync: execSync2 } = __require("child_process");
+    const gitDir = String(execSync2("git rev-parse --git-dir", { encoding: "utf-8" })).trim();
+    const guardPath = join(gitDir, STASH_GUARD_FILE);
+    if (existsSync(guardPath)) {
+      unlinkSync(guardPath);
+    }
+  } catch {
+  }
+}
+async function checkStashGuard() {
+  try {
+    const gitDir = await getGitDir();
+    const guardPath = join(gitDir, STASH_GUARD_FILE);
+    if (existsSync(guardPath)) {
+      const timestamp = readFileSync(guardPath, "utf-8").trim();
+      return { exists: true, timestamp };
+    }
+  } catch {
+  }
+  return { exists: false };
+}
+async function findStashEntry() {
+  const git = getGit();
+  try {
+    const result = await git.stash(["list"]);
+    const lines = result.trim().split("\n");
+    for (const line of lines) {
+      if (line.includes("Auto-stash by git-sync-tui")) {
+        return line;
+      }
+    }
+  } catch {
+  }
+  return null;
+}
+
+// src/components/stash-recovery.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function StashRecovery({ timestamp, onRecover, onSkip }) {
+  const [stashEntry, setStashEntry] = useState(void 0);
+  useEffect(() => {
+    findStashEntry().then(setStashEntry);
+  }, []);
+  useInput2((input) => {
+    if (input === "y" || input === "Y") {
+      onRecover();
+    } else if (input === "n" || input === "N") {
+      onSkip();
+    }
+  });
+  if (stashEntry === void 0) {
+    return /* @__PURE__ */ jsx3(Spinner, { label: "\u68C0\u67E5 stash \u8BB0\u5F55..." });
+  }
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsxs3(StatusPanel, { type: "warn", title: "\u68C0\u6D4B\u5230\u4E0A\u6B21\u8FD0\u884C\u4E2D\u65AD", children: [
+      timestamp && /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+        "  \u4E2D\u65AD\u65F6\u95F4: ",
+        timestamp
+      ] }),
+      stashEntry && /* @__PURE__ */ jsxs3(Text3, { color: "gray", children: [
+        "  Stash: ",
+        stashEntry
+      ] }),
+      !stashEntry && /* @__PURE__ */ jsx3(Text3, { color: "red", children: "  \u672A\u627E\u5230\u5BF9\u5E94\u7684 stash \u6761\u76EE\uFF08\u53EF\u80FD\u5DF2\u624B\u52A8\u6062\u590D\uFF09" })
+    ] }),
+    /* @__PURE__ */ jsxs3(Box3, { children: [
+      /* @__PURE__ */ jsx3(Text3, { bold: true, children: stashEntry ? "\u6062\u590D stash? " : "\u6E05\u9664\u4E2D\u65AD\u6807\u8BB0? " }),
+      /* @__PURE__ */ jsx3(InlineKeys, { hints: [
+        { key: "y", label: "\u662F" },
+        { key: "n", label: "\u8DF3\u8FC7" }
+      ] })
+    ] })
+  ] });
+}
+
+// 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";
 
 // src/hooks/use-git.ts
+import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
 function useAsync(fn, deps = []) {
-  const [state, setState] = useState({
+  const [state, setState] = useState2({
     data: null,
     loading: true,
     error: null
@@ -200,7 +397,7 @@ function useAsync(fn, deps = []) {
       setState({ data: null, loading: false, error: err.message });
     }
   }, deps);
-  useEffect(() => {
+  useEffect2(() => {
     load();
   }, [load]);
   return { ...state, reload: load };
@@ -221,9 +418,9 @@ function useCommits(remote, branch, count = 30) {
   );
 }
 function useCommitStat(hashes) {
-  const [stat, setStat] = useState("");
-  const [loading, setLoading] = useState(false);
-  useEffect(() => {
+  const [stat, setStat] = useState2("");
+  const [loading, setLoading] = useState2(false);
+  useEffect2(() => {
     if (hashes.length === 0) {
       setStat("");
       return;
@@ -241,31 +438,50 @@ function useCommitStat(hashes) {
 }
 
 // src/components/remote-select.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function RemoteSelect({ onSelect }) {
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function extractRemoteName(url) {
+  const trimmed = url.trim().replace(/\/+$/, "").replace(/\.git$/, "");
+  const lastSegment = trimmed.split(/[/\\:]+/).filter(Boolean).pop() || "";
+  return lastSegment;
+}
+function RemoteSelect({ onSelect, onBack }) {
   const { data: remotes, loading, error, reload } = useRemotes();
-  const [phase, setPhase] = useState2("list");
-  const [customUrl, setCustomUrl] = useState2("");
-  const [addError, setAddError] = useState2(null);
+  const [phase, setPhase] = useState3("list");
+  const [customUrl, setCustomUrl] = useState3("");
+  const [addError, setAddError] = useState3(null);
+  useInput3((_input, key) => {
+    if (key.escape) {
+      if (phase === "input-name") {
+        setPhase("input-url");
+      } else if (phase === "input-url") {
+        setPhase("list");
+      } else if (phase === "list") {
+        onBack?.();
+      }
+    }
+  });
   if (loading) {
-    return /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(Spinner, { label: "\u6B63\u5728\u83B7\u53D6\u8FDC\u7A0B\u4ED3\u5E93\u5217\u8868..." }) });
+    return /* @__PURE__ */ jsx4(Spinner2, { label: "\u83B7\u53D6\u8FDC\u7A0B\u4ED3\u5E93..." });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs2(Text2, { color: "red", children: [
-      "\u83B7\u53D6\u8FDC\u7A0B\u4ED3\u5E93\u5931\u8D25: ",
+    return /* @__PURE__ */ jsxs4(Text4, { color: "red", children: [
+      "\u2716 \u83B7\u53D6\u8FDC\u7A0B\u4ED3\u5E93\u5931\u8D25: ",
       error
     ] });
   }
   if (phase === "adding") {
-    return /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(Spinner, { label: "\u6B63\u5728\u6DFB\u52A0\u8FDC\u7A0B\u4ED3\u5E93..." }) });
+    return /* @__PURE__ */ jsx4(Spinner2, { label: "\u6DFB\u52A0\u8FDC\u7A0B\u4ED3\u5E93..." });
   }
   if (phase === "input-url") {
-    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", gap: 1, children: [
-      /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "[1/5] \u6DFB\u52A0\u8FDC\u7A0B\u4ED3\u5E93" }),
-      addError && /* @__PURE__ */ jsx2(Text2, { color: "red", children: addError }),
-      /* @__PURE__ */ jsxs2(Box2, { children: [
-        /* @__PURE__ */ jsx2(Text2, { children: "\u4ED3\u5E93\u5730\u5740: " }),
-        /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx4(SectionHeader, { title: "\u6DFB\u52A0\u8FDC\u7A0B\u4ED3\u5E93" }),
+      addError && /* @__PURE__ */ jsxs4(Text4, { color: "red", children: [
+        "\u2716 ",
+        addError
+      ] }),
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "URL \u25B8 " }),
+        /* @__PURE__ */ jsx4(
           TextInput,
           {
             placeholder: "https://github.com/user/repo.git",
@@ -280,23 +496,24 @@ function RemoteSelect({ onSelect }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx2(Text2, { color: "gray", dimColor: true, children: "\u652F\u6301 HTTPS / SSH \u5730\u5740" })
+      /* @__PURE__ */ jsx4(Text4, { color: "gray", dimColor: true, children: "  \u652F\u6301 HTTPS / SSH \u5730\u5740" })
     ] });
   }
   if (phase === "input-name") {
-    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", gap: 1, children: [
-      /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "[1/5] \u6DFB\u52A0\u8FDC\u7A0B\u4ED3\u5E93" }),
-      /* @__PURE__ */ jsxs2(Text2, { color: "gray", children: [
-        "\u5730\u5740: ",
-        customUrl
+    const defaultName = extractRemoteName(customUrl);
+    return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx4(SectionHeader, { title: "\u6DFB\u52A0\u8FDC\u7A0B\u4ED3\u5E93", subtitle: customUrl }),
+      addError && /* @__PURE__ */ jsxs4(Text4, { color: "red", children: [
+        "\u2716 ",
+        addError
       ] }),
-      addError && /* @__PURE__ */ jsx2(Text2, { color: "red", children: addError }),
-      /* @__PURE__ */ jsxs2(Box2, { children: [
-        /* @__PURE__ */ jsx2(Text2, { children: "\u8FDC\u7A0B\u540D\u79F0: " }),
-        /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsx4(Text4, { color: "gray", children: "\u540D\u79F0 \u25B8 " }),
+        /* @__PURE__ */ jsx4(
           TextInput,
           {
-            placeholder: "upstream",
+            placeholder: defaultName || "upstream",
+            defaultValue: defaultName,
             onSubmit: async (name) => {
               const remoteName = name.trim();
               if (!remoteName) {
@@ -333,9 +550,9 @@ function RemoteSelect({ onSelect }) {
       value: "__add_custom__"
     }
   ];
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx2(Text2, { bold: true, color: "cyan", children: "[1/5] \u9009\u62E9\u8FDC\u7A0B\u4ED3\u5E93" }),
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx4(SectionHeader, { title: "\u9009\u62E9\u8FDC\u7A0B\u4ED3\u5E93" }),
+    /* @__PURE__ */ jsx4(
       Select,
       {
         options,
@@ -352,66 +569,63 @@ function RemoteSelect({ onSelect }) {
 }
 
 // src/components/branch-select.tsx
-import { useState as useState3, useMemo } from "react";
-import { Box as Box3, Text as Text3 } from "ink";
-import { Select as Select2, Spinner as Spinner2, TextInput as TextInput2 } from "@inkjs/ui";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function BranchSelect({ remote, onSelect }) {
+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 { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function BranchSelect({ remote, onSelect, onBack }) {
   const { data: branches, loading, error } = useBranches(remote);
-  const [filter, setFilter] = useState3("");
+  const [filter, setFilter] = useState4("");
+  useInput4((_input, key) => {
+    if (key.escape) onBack?.();
+  });
   const filteredOptions = useMemo(() => {
     if (!branches) return [];
     const filtered = filter ? branches.filter((b) => b.toLowerCase().includes(filter.toLowerCase())) : branches;
     return filtered.map((b) => ({ label: b, value: b }));
   }, [branches, filter]);
   if (loading) {
-    return /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(Spinner2, { label: `\u6B63\u5728\u83B7\u53D6 ${remote} \u7684\u5206\u652F\u5217\u8868...` }) });
+    return /* @__PURE__ */ jsx5(Spinner3, { label: `\u83B7\u53D6 ${remote} \u7684\u5206\u652F\u5217\u8868...` });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
-      "\u83B7\u53D6\u5206\u652F\u5217\u8868\u5931\u8D25: ",
+    return /* @__PURE__ */ jsxs5(Text5, { color: "red", children: [
+      "\u2716 \u83B7\u53D6\u5206\u652F\u5217\u8868\u5931\u8D25: ",
       error
     ] });
   }
   if (!branches || branches.length === 0) {
-    return /* @__PURE__ */ jsx3(Text3, { color: "red", children: "\u672A\u627E\u5230\u8FDC\u7A0B\u5206\u652F" });
+    return /* @__PURE__ */ jsx5(Text5, { color: "red", children: "\u2716 \u672A\u627E\u5230\u8FDC\u7A0B\u5206\u652F" });
   }
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsxs3(Text3, { bold: true, color: "cyan", children: [
-      "[2/5] \u9009\u62E9\u5206\u652F (",
-      remote,
-      ")"
-    ] }),
-    /* @__PURE__ */ jsxs3(Box3, { children: [
-      /* @__PURE__ */ jsx3(Text3, { color: "gray", children: "\u641C\u7D22: " }),
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx5(SectionHeader, { title: `\u9009\u62E9\u5206\u652F`, subtitle: `${remote} \xB7 ${branches.length} \u4E2A\u5206\u652F` }),
+    /* @__PURE__ */ jsxs5(Box5, { children: [
+      /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "/ " }),
+      /* @__PURE__ */ jsx5(
         TextInput2,
         {
-          placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FC7\u6EE4\u5206\u652F...",
+          placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FC7\u6EE4...",
           onChange: setFilter
         }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs3(Text3, { color: "gray", dimColor: true, children: [
-      "\u5171 ",
-      branches.length,
-      " \u4E2A\u5206\u652F",
-      filter ? `\uFF0C\u5339\u914D ${filteredOptions.length} \u4E2A` : ""
+      ),
+      filter && /* @__PURE__ */ jsxs5(Text5, { color: "gray", dimColor: true, children: [
+        " \xB7 \u5339\u914D ",
+        filteredOptions.length
+      ] })
     ] }),
-    filteredOptions.length > 0 ? /* @__PURE__ */ jsx3(Select2, { options: filteredOptions, onChange: onSelect }) : /* @__PURE__ */ jsx3(Text3, { color: "yellow", children: "\u65E0\u5339\u914D\u5206\u652F" })
+    filteredOptions.length > 0 ? /* @__PURE__ */ jsx5(Select2, { options: filteredOptions, onChange: onSelect }) : /* @__PURE__ */ jsx5(Text5, { color: "yellow", children: "\u25B2 \u65E0\u5339\u914D\u5206\u652F" })
   ] });
 }
 
 // src/components/commit-list.tsx
-import { useState as useState4, useMemo as useMemo2, useRef } from "react";
-import { Box as Box4, Text as Text4, useInput as useInput2 } from "ink";
-import { Spinner as Spinner3 } from "@inkjs/ui";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function CommitList({ remote, branch, onSelect }) {
+import { useState as useState5, useMemo as useMemo2, useRef } 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 CommitList({ remote, branch, onSelect, onBack }) {
   const { data: commits, loading, error } = useCommits(remote, branch, 30);
-  const [selectedIndex, setSelectedIndex] = useState4(0);
-  const [selectedHashes, setSelectedHashes] = useState4(/* @__PURE__ */ new Set());
-  const [shiftMode, setShiftMode] = useState4(false);
+  const [selectedIndex, setSelectedIndex] = useState5(0);
+  const [selectedHashes, setSelectedHashes] = useState5(/* @__PURE__ */ new Set());
+  const [shiftMode, setShiftMode] = useState5(false);
   const anchorIndexRef = useRef(null);
   const selectedKey = useMemo2(() => Array.from(selectedHashes).sort().join(","), [selectedHashes]);
   const selectedArray = useMemo2(() => Array.from(selectedHashes), [selectedKey]);
@@ -458,9 +672,7 @@ function CommitList({ remote, branch, onSelect }) {
     setSelectedHashes((prev) => {
       const next = /* @__PURE__ */ new Set();
       for (const c of commits) {
-        if (!prev.has(c.hash)) {
-          next.add(c.hash);
-        }
+        if (!prev.has(c.hash)) next.add(c.hash);
       }
       return next;
     });
@@ -475,7 +687,7 @@ function CommitList({ remote, branch, onSelect }) {
       return next;
     });
   };
-  useInput2((input, key) => {
+  useInput5((input, key) => {
     if (!commits || commits.length === 0) return;
     if (key.shift) {
       if (!shiftMode) {
@@ -501,9 +713,7 @@ function CommitList({ remote, branch, onSelect }) {
       }
       return;
     }
-    if (shiftMode) {
-      setShiftMode(false);
-    }
+    if (shiftMode) setShiftMode(false);
     if (key.upArrow) {
       setSelectedIndex((prev) => Math.max(0, prev - 1));
     } else if (key.downArrow) {
@@ -516,6 +726,8 @@ function CommitList({ remote, branch, onSelect }) {
       invertSelection();
     } else if (input === "r" || input === "R") {
       selectToCurrent();
+    } else if (key.escape) {
+      onBack?.();
     } else if (key.return) {
       if (selectedHashes.size > 0) {
         onSelect(Array.from(selectedHashes), commits);
@@ -523,120 +735,96 @@ function CommitList({ remote, branch, onSelect }) {
     }
   });
   if (loading) {
-    return /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsx4(Spinner3, { label: `\u6B63\u5728\u83B7\u53D6 ${remote}/${branch} \u7684 commit \u5217\u8868...` }) });
+    return /* @__PURE__ */ jsx6(Spinner4, { label: `\u83B7\u53D6 ${remote}/${branch} \u7684 commit \u5217\u8868...` });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs4(Text4, { color: "red", children: [
-      "\u83B7\u53D6 commit \u5217\u8868\u5931\u8D25: ",
+    return /* @__PURE__ */ jsxs6(Text6, { color: "red", children: [
+      "\u2716 \u83B7\u53D6 commit \u5217\u8868\u5931\u8D25: ",
       error
     ] });
   }
   if (!commits || commits.length === 0) {
-    return /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: "\u8BE5\u5206\u652F\u6CA1\u6709 commit" });
+    return /* @__PURE__ */ jsx6(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), commits.length - visibleCount));
   const visibleCommits = commits.slice(startIdx, startIdx + visibleCount);
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "[3/5] \u9009\u62E9\u8981\u540C\u6B65\u7684 commit" }),
-    /* @__PURE__ */ jsxs4(Text4, { color: "gray", dimColor: true, children: [
-      remote,
-      "/",
-      branch,
-      " \u6700\u8FD1 ",
-      commits.length,
-      " \u4E2A commit | \u5DF2\u9009 ",
-      selectedHashes.size,
-      " \u4E2A",
-      shiftMode && /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: " | Shift \u6A21\u5F0F" })
+  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: [
+      /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
+        remote,
+        "/",
+        branch
+      ] }),
+      /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
+        commits.length,
+        " commits"
+      ] }),
+      /* @__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" })
     ] }),
-    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
-      startIdx > 0 && /* @__PURE__ */ jsxs4(Text4, { color: "gray", dimColor: true, children: [
+    /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+      startIdx > 0 && /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
         "  \u2191 ",
         startIdx,
-        " more..."
+        " more"
       ] }),
       visibleCommits.map((c, i) => {
         const actualIdx = startIdx + i;
         const isSelected = selectedHashes.has(c.hash);
         const isCursor = actualIdx === selectedIndex;
         const isAnchor = actualIdx === anchorIndexRef.current;
-        return /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsxs4(Text4, { backgroundColor: isCursor ? "blue" : void 0, color: isSelected ? "green" : "white", children: [
-            isCursor ? "\u25B6 " : "  ",
-            isAnchor ? "\u2693 " : isSelected ? "\u25CF " : "\u25CB ",
-            c.shortHash,
+        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__ */ jsxs4(Text4, { color: "gray", dimColor: true, children: [
-            " (",
+          /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
+            " ",
             c.author,
-            ")"
+            " \xB7 ",
+            c.date
           ] })
         ] }, c.hash);
       }),
-      startIdx + visibleCount < commits.length && /* @__PURE__ */ jsxs4(Text4, { color: "gray", dimColor: true, children: [
+      startIdx + visibleCount < commits.length && /* @__PURE__ */ jsxs6(Text6, { color: "gray", dimColor: true, children: [
         "  \u2193 ",
         commits.length - startIdx - visibleCount,
-        " more..."
+        " more"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", gap: 0, children: [
-      /* @__PURE__ */ jsxs4(Box4, { gap: 2, children: [
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "\u2191/\u2193" }),
-          " \u5BFC\u822A"
-        ] }),
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "Space" }),
-          " \u9009\u62E9"
-        ] }),
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "a" }),
-          " \u5168\u9009"
-        ] }),
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "i" }),
-          " \u53CD\u9009"
-        ] }),
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "Enter" }),
-          " \u786E\u8BA4"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs4(Box4, { gap: 2, children: [
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: "Shift+\u2191/\u2193" }),
-          " \u8FDE\u7EED\u9009\u62E9"
-        ] }),
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "yellow", children: "Shift+Space" }),
-          " \u8303\u56F4\u9009\u62E9"
-        ] }),
-        /* @__PURE__ */ jsxs4(Text4, { children: [
-          /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "r" }),
-          " \u9009\u81F3\u5F00\u5934"
-        ] })
-      ] })
+    /* @__PURE__ */ jsx6(KeyHints, { hints: [
+      { key: "\u2191\u2193", label: "\u5BFC\u822A" },
+      { key: "Space", label: "\u9009\u62E9" },
+      { key: "a", label: "\u5168\u9009" },
+      { key: "i", label: "\u53CD\u9009" },
+      { key: "r", label: "\u9009\u81F3\u5F00\u5934" },
+      { key: "Shift+\u2191\u2193", label: "\u8FDE\u9009" },
+      { key: "Enter", label: "\u786E\u8BA4" },
+      { key: "Esc", label: "\u8FD4\u56DE" }
     ] }),
-    selectedHashes.size > 0 && /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [
-      /* @__PURE__ */ jsxs4(Text4, { bold: true, color: "yellow", children: [
-        "\u5DF2\u9009 ",
-        selectedHashes.size,
-        " \u4E2A commit \u2014 diff --stat \u9884\u89C8:"
-      ] }),
-      statLoading ? /* @__PURE__ */ jsx4(Spinner3, { label: "\u52A0\u8F7D\u4E2D..." }) : /* @__PURE__ */ jsx4(Text4, { color: "gray", children: stat || "(\u65E0\u53D8\u66F4)" })
-    ] })
+    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)" }) })
   ] });
 }
 
 // src/components/confirm-panel.tsx
-import { Box as Box5, Text as Text5, useInput as useInput3 } from "ink";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Box as Box7, Text as Text7, useInput as useInput6 } from "ink";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function ConfirmPanel({ commits, selectedHashes, hasMerge, useMainline, onToggleMainline, onConfirm, onCancel }) {
-  useInput3((input) => {
-    if (input === "y" || input === "Y") {
+  useInput6((input, key) => {
+    if (key.escape) {
+      onCancel();
+    } else if (input === "y" || input === "Y") {
       onConfirm();
     } else if (input === "n" || input === "N" || input === "q") {
       onCancel();
@@ -645,68 +833,57 @@ function ConfirmPanel({ commits, selectedHashes, hasMerge, useMainline, onToggle
     }
   });
   const selectedCommits = selectedHashes.map((hash) => commits.find((c) => c.hash === hash)).filter(Boolean);
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx5(Text5, { bold: true, color: "cyan", children: "[4/5] \u786E\u8BA4\u6267\u884C" }),
-    /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, children: [
-      /* @__PURE__ */ jsxs5(Text5, { bold: true, children: [
-        "\u5C06 cherry-pick --no-commit \u4EE5\u4E0B ",
-        selectedCommits.length,
-        " \u4E2A commit:"
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx7(SectionHeader, { title: "\u786E\u8BA4\u6267\u884C" }),
+    /* @__PURE__ */ jsx7(StatusPanel, { type: "info", title: `cherry-pick --no-commit \xB7 ${selectedCommits.length} \u4E2A commit`, children: selectedCommits.map((c) => /* @__PURE__ */ jsxs7(Box7, { children: [
+      /* @__PURE__ */ jsxs7(Text7, { color: "yellow", children: [
+        "  ",
+        c.shortHash
       ] }),
-      selectedCommits.map((c) => /* @__PURE__ */ jsxs5(Text5, { children: [
-        /* @__PURE__ */ jsxs5(Text5, { color: "green", children: [
-          "  ",
-          c.shortHash
-        ] }),
-        /* @__PURE__ */ jsxs5(Text5, { children: [
-          " ",
-          c.message
-        ] }),
-        /* @__PURE__ */ jsxs5(Text5, { color: "gray", dimColor: true, children: [
-          " (",
-          c.author,
-          ")"
-        ] })
-      ] }, c.hash))
-    ] }),
-    hasMerge && /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", borderStyle: "single", borderColor: "red", paddingX: 1, children: [
-      /* @__PURE__ */ jsx5(Text5, { bold: true, color: "red", children: "\u68C0\u6D4B\u5230 Merge Commit" }),
-      /* @__PURE__ */ jsx5(Text5, { color: "yellow", children: "Cherry-pick \u5408\u5E76\u63D0\u4EA4\u9700\u8981\u6307\u5B9A\u7236\u8282\u70B9 (-m 1)" }),
-      /* @__PURE__ */ jsxs5(Text5, { children: [
-        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "[m]" }),
-        /* @__PURE__ */ jsx5(Text5, { children: " \u5207\u6362 -m 1: " }),
-        useMainline ? /* @__PURE__ */ jsx5(Text5, { color: "green", children: "\u5DF2\u542F\u7528" }) : /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "\u672A\u542F\u7528" })
+      /* @__PURE__ */ jsxs7(Text7, { children: [
+        " ",
+        c.message
+      ] }),
+      /* @__PURE__ */ jsxs7(Text7, { color: "gray", dimColor: true, children: [
+        " ",
+        c.author
+      ] })
+    ] }, c.hash)) }),
+    hasMerge && /* @__PURE__ */ jsxs7(StatusPanel, { type: "warn", title: "\u68C0\u6D4B\u5230 Merge Commit", children: [
+      /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "  Cherry-pick \u5408\u5E76\u63D0\u4EA4\u9700\u8981\u6307\u5B9A\u7236\u8282\u70B9 (-m 1)" }),
+      /* @__PURE__ */ jsxs7(Box7, { children: [
+        /* @__PURE__ */ jsx7(Text7, { children: "  " }),
+        /* @__PURE__ */ jsx7(Text7, { color: "cyan", children: "[m]" }),
+        /* @__PURE__ */ jsx7(Text7, { children: " \u5207\u6362 -m 1: " }),
+        useMainline ? /* @__PURE__ */ jsx7(Text7, { color: "green", bold: true, children: "\u5DF2\u542F\u7528" }) : /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "\u672A\u542F\u7528" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs5(Box5, { children: [
-      /* @__PURE__ */ jsx5(Text5, { color: "yellow", children: "\u26A0 " }),
-      /* @__PURE__ */ jsx5(Text5, { children: "\u4F7F\u7528 --no-commit \u6A21\u5F0F\uFF0C\u6539\u52A8\u5C06\u6682\u5B58\u5230\u5DE5\u4F5C\u533A\uFF0C\u9700\u624B\u52A8 commit" })
+    /* @__PURE__ */ jsxs7(Box7, { children: [
+      /* @__PURE__ */ jsx7(Text7, { color: "yellow", children: "\u25B2 " }),
+      /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "--no-commit \u6A21\u5F0F\uFF0C\u6539\u52A8\u5C06\u6682\u5B58\u5230\u5DE5\u4F5C\u533A\uFF0C\u9700\u624B\u52A8 commit" })
     ] }),
-    /* @__PURE__ */ jsxs5(Box5, { children: [
-      /* @__PURE__ */ jsx5(Text5, { bold: true, children: "\u786E\u8BA4\u6267\u884C? " }),
-      /* @__PURE__ */ jsx5(Text5, { color: "green", children: "[y]" }),
-      /* @__PURE__ */ jsx5(Text5, { children: " \u786E\u8BA4 / " }),
-      /* @__PURE__ */ jsx5(Text5, { color: "red", children: "[n]" }),
-      /* @__PURE__ */ jsx5(Text5, { children: " \u53D6\u6D88" }),
-      hasMerge && /* @__PURE__ */ jsxs5(Text5, { children: [
-        " / ",
-        /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "[m]" }),
-        " \u5207\u6362 -m 1"
+    /* @__PURE__ */ jsxs7(Box7, { children: [
+      /* @__PURE__ */ jsx7(Text7, { bold: true, children: "\u786E\u8BA4\u6267\u884C? " }),
+      /* @__PURE__ */ jsx7(InlineKeys, { hints: [
+        { key: "y", label: "\u786E\u8BA4" },
+        { key: "n", label: "\u53D6\u6D88" },
+        ...hasMerge ? [{ key: "m", label: "\u5207\u6362 -m 1" }] : [],
+        { key: "Esc", label: "\u8FD4\u56DE" }
       ] })
     ] })
   ] });
 }
 
 // src/components/result-panel.tsx
-import { useState as useState5, useEffect as useEffect2 } from "react";
-import { Box as Box6, Text as Text6 } from "ink";
-import { Spinner as Spinner4 } from "@inkjs/ui";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState6, useEffect as useEffect3 } 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";
 function ResultPanel({ selectedHashes, useMainline, stashed, onStashRestored, onDone }) {
-  const [phase, setPhase] = useState5("executing");
-  const [result, setResult] = useState5(null);
-  const [stagedStat, setStagedStat] = useState5("");
-  const [stashRestored, setStashRestored] = useState5(null);
+  const [phase, setPhase] = useState6("executing");
+  const [result, setResult] = useState6(null);
+  const [stagedStat, setStagedStat] = useState6("");
+  const [stashRestored, setStashRestored] = useState6(null);
   const tryRestoreStash = async () => {
     if (!stashed) return true;
     setPhase("restoring");
@@ -715,7 +892,7 @@ function ResultPanel({ selectedHashes, useMainline, stashed, onStashRestored, on
     if (ok) onStashRestored();
     return ok;
   };
-  useEffect2(() => {
+  useEffect3(() => {
     async function run() {
       const res = await cherryPick(selectedHashes, useMainline);
       setResult(res);
@@ -732,62 +909,93 @@ function ResultPanel({ selectedHashes, useMainline, stashed, onStashRestored, on
     run();
   }, []);
   if (phase === "executing") {
-    return /* @__PURE__ */ jsx6(Box6, { children: /* @__PURE__ */ jsx6(Spinner4, { label: `\u6B63\u5728\u6267\u884C cherry-pick --no-commit (${selectedHashes.length} \u4E2A commit)...` }) });
+    return /* @__PURE__ */ jsx8(Spinner5, { label: `cherry-pick --no-commit (${selectedHashes.length} \u4E2A commit)...` });
   }
   if (phase === "restoring") {
-    return /* @__PURE__ */ jsx6(Box6, { children: /* @__PURE__ */ jsx6(Spinner4, { label: "\u6B63\u5728\u6062\u590D\u5DE5\u4F5C\u533A (git stash pop)..." }) });
+    return /* @__PURE__ */ jsx8(Spinner5, { label: "\u6062\u590D\u5DE5\u4F5C\u533A (git stash pop)..." });
   }
   if (phase === "error" && result) {
-    return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, color: "red", children: "[5/5] Cherry-pick \u9047\u5230\u51B2\u7A81" }),
-      result.conflictFiles && result.conflictFiles.length > 0 && /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", borderStyle: "single", borderColor: "red", paddingX: 1, children: [
-        /* @__PURE__ */ jsx6(Text6, { bold: true, children: "\u51B2\u7A81\u6587\u4EF6:" }),
-        result.conflictFiles.map((f) => /* @__PURE__ */ jsxs6(Text6, { color: "red", children: [
-          "  ",
-          f
-        ] }, f))
+    return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", gap: 1, children: [
+      /* @__PURE__ */ jsx8(SectionHeader, { title: "Cherry-pick \u9047\u5230\u51B2\u7A81" }),
+      result.conflictFiles && result.conflictFiles.length > 0 && /* @__PURE__ */ jsx8(StatusPanel, { type: "error", title: "\u51B2\u7A81\u6587\u4EF6", children: result.conflictFiles.map((f) => /* @__PURE__ */ jsxs8(Text8, { color: "red", children: [
+        "  ",
+        f
+      ] }, f)) }),
+      /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx8(Text8, { color: "yellow", children: "\u25B8 \u624B\u52A8\u89E3\u51B3\u51B2\u7A81\u540E\u6267\u884C git add \u548C git commit" }),
+        /* @__PURE__ */ jsx8(Text8, { color: "gray", dimColor: true, children: "\u25B8 \u6216\u6267\u884C git cherry-pick --abort \u653E\u5F03\u64CD\u4F5C" })
       ] }),
-      /* @__PURE__ */ jsx6(Text6, { color: "yellow", children: "\u8BF7\u624B\u52A8\u89E3\u51B3\u51B2\u7A81\u540E\u6267\u884C git add \u548C git commit" }),
-      /* @__PURE__ */ jsx6(Text6, { color: "gray", dimColor: true, children: "\u6216\u6267\u884C git cherry-pick --abort \u653E\u5F03\u64CD\u4F5C" }),
-      stashed && stashRestored === false && /* @__PURE__ */ jsx6(Text6, { color: "yellow", children: "\u6CE8\u610F: stash \u6062\u590D\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8 git stash pop" }),
-      stashed && stashRestored === true && /* @__PURE__ */ jsx6(Text6, { color: "green", children: "\u5DF2\u6062\u590D\u5DE5\u4F5C\u533A\u53D8\u66F4 (stash pop)" })
+      stashed && stashRestored === false && /* @__PURE__ */ jsx8(Text8, { color: "yellow", children: "\u25B2 stash \u6062\u590D\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8 git stash pop" }),
+      stashed && stashRestored === true && /* @__PURE__ */ jsx8(Text8, { color: "green", children: "\u2714 \u5DF2\u6062\u590D\u5DE5\u4F5C\u533A\u53D8\u66F4 (stash pop)" })
     ] });
   }
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", gap: 1, children: [
-    /* @__PURE__ */ jsx6(Text6, { bold: true, color: "green", children: "[5/5] \u540C\u6B65\u5B8C\u6210!" }),
-    /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", borderStyle: "round", borderColor: "green", paddingX: 1, children: [
-      /* @__PURE__ */ jsx6(Text6, { bold: true, children: "\u6682\u5B58\u533A\u53D8\u66F4\u6982\u89C8 (git diff --cached --stat):" }),
-      /* @__PURE__ */ jsx6(Text6, { color: "gray", children: stagedStat || "(\u65E0\u53D8\u66F4)" })
-    ] }),
-    stashed && (stashRestored ? /* @__PURE__ */ jsx6(Text6, { color: "green", children: "\u5DF2\u6062\u590D\u5DE5\u4F5C\u533A\u53D8\u66F4 (stash pop)" }) : /* @__PURE__ */ jsx6(Text6, { color: "yellow", children: "stash pop \u5931\u8D25\uFF0C\u8BF7\u624B\u52A8 git stash pop" })),
-    /* @__PURE__ */ jsx6(Text6, { color: "yellow", children: "\u6539\u52A8\u5DF2\u6682\u5B58\u5230\u5DE5\u4F5C\u533A (--no-commit \u6A21\u5F0F)" }),
-    /* @__PURE__ */ jsx6(Text6, { children: "\u8BF7\u5BA1\u67E5\u540E\u624B\u52A8\u6267\u884C:" }),
-    /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "  git diff --cached          # \u67E5\u770B\u8BE6\u7EC6 diff" }),
-    /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: '  git commit -m "\u540C\u6B65 commit" # \u63D0\u4EA4' }),
-    /* @__PURE__ */ jsx6(Text6, { color: "cyan", children: "  git reset HEAD             # \u6216\u653E\u5F03\u6240\u6709\u6539\u52A8" })
+  return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx8(SectionHeader, { title: "\u540C\u6B65\u5B8C\u6210" }),
+    /* @__PURE__ */ jsx8(StatusPanel, { type: "success", title: "\u6682\u5B58\u533A\u53D8\u66F4 (git diff --cached --stat)", children: /* @__PURE__ */ jsx8(Text8, { color: "gray", children: stagedStat || "(\u65E0\u53D8\u66F4)" }) }),
+    stashed && (stashRestored ? /* @__PURE__ */ jsx8(Text8, { color: "green", children: "\u2714 \u5DF2\u6062\u590D\u5DE5\u4F5C\u533A\u53D8\u66F4 (stash pop)" }) : /* @__PURE__ */ jsx8(Text8, { color: "yellow", children: "\u25B2 stash pop \u5931\u8D25\uFF0C\u8BF7\u624B\u52A8 git stash pop" })),
+    /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx8(Text8, { color: "yellow", children: "\u25B2 \u6539\u52A8\u5DF2\u6682\u5B58\u5230\u5DE5\u4F5C\u533A (--no-commit \u6A21\u5F0F)" }),
+      /* @__PURE__ */ jsx8(Text8, { color: "gray", dimColor: true, children: "  \u5BA1\u67E5\u540E\u624B\u52A8\u6267\u884C:" }),
+      /* @__PURE__ */ jsxs8(Text8, { color: "cyan", children: [
+        "  git diff --cached          ",
+        /* @__PURE__ */ jsx8(Text8, { color: "gray", dimColor: true, children: "# \u67E5\u770B\u8BE6\u7EC6 diff" })
+      ] }),
+      /* @__PURE__ */ jsxs8(Text8, { color: "cyan", children: [
+        '  git commit -m "sync: ..."  ',
+        /* @__PURE__ */ jsx8(Text8, { color: "gray", dimColor: true, children: "# \u63D0\u4EA4" })
+      ] }),
+      /* @__PURE__ */ jsxs8(Text8, { color: "cyan", children: [
+        "  git reset HEAD             ",
+        /* @__PURE__ */ jsx8(Text8, { color: "gray", dimColor: true, children: "# \u6216\u653E\u5F03" })
+      ] })
+    ] })
   ] });
 }
 
 // src/app.tsx
 import { execSync } from "child_process";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var STEP_NUMBER = {
+  checking: 0,
+  "stash-recovery": 0,
+  "stash-prompt": 0,
+  remote: 1,
+  branch: 2,
+  commits: 3,
+  confirm: 4,
+  result: 5
+};
+var STEP_DEBOUNCE = 100;
 function App() {
   const { exit } = useApp();
-  const [step, setStep] = useState6("checking");
-  const [remote, setRemote] = useState6("");
-  const [branch, setBranch] = useState6("");
-  const [selectedHashes, setSelectedHashes] = useState6([]);
-  const [commits, setCommits] = useState6([]);
-  const [hasMerge, setHasMerge] = useState6(false);
-  const [useMainline, setUseMainline] = useState6(false);
-  const [stashed, setStashed] = useState6(false);
+  const [step, setStepRaw] = useState7("checking");
+  const [inputReady, setInputReady] = useState7(true);
+  const [remote, setRemote] = useState7("");
+  const [branch, setBranch] = useState7("");
+  const [selectedHashes, setSelectedHashes] = useState7([]);
+  const [commits, setCommits] = useState7([]);
+  const [hasMerge, setHasMerge] = useState7(false);
+  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 setStep = useCallback2((newStep) => {
+    setInputReady(false);
+    setStepRaw(newStep);
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+    debounceTimer.current = setTimeout(() => {
+      if (mountedRef.current) setInputReady(true);
+    }, STEP_DEBOUNCE);
+  }, []);
   const restoreStashSync = useCallback2(() => {
     if (stashedRef.current && !stashRestoredRef.current) {
       try {
         execSync("git stash pop", { stdio: "ignore" });
         stashRestoredRef.current = true;
+        removeStashGuardSync();
       } catch {
         try {
           process.stderr.write("\n\u26A0 stash \u81EA\u52A8\u6062\u590D\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u6267\u884C: git stash pop\n");
@@ -798,71 +1006,117 @@ function App() {
   }, []);
   const markStashRestored = useCallback2(() => {
     stashRestoredRef.current = true;
+    removeStashGuard();
   }, []);
-  useEffect3(() => {
-    isWorkingDirClean().then((clean) => {
-      if (clean) {
-        setStep("remote");
-      } else {
-        setStep("stash-prompt");
+  useEffect4(() => {
+    mountedRef.current = true;
+    async function check() {
+      const guard = await checkStashGuard();
+      if (!mountedRef.current) return;
+      if (guard.exists) {
+        setGuardTimestamp(guard.timestamp);
+        setStep("stash-recovery");
+        return;
       }
-    });
+      const clean = await isWorkingDirClean();
+      if (!mountedRef.current) return;
+      setStep(clean ? "remote" : "stash-prompt");
+    }
+    check();
     const onSignal = () => {
       restoreStashSync();
       process.exit(0);
     };
     process.on("SIGINT", onSignal);
     process.on("SIGTERM", onSignal);
-    process.on("beforeExit", restoreStashSync);
+    process.on("SIGHUP", onSignal);
     return () => {
+      mountedRef.current = false;
+      if (debounceTimer.current) clearTimeout(debounceTimer.current);
       process.off("SIGINT", onSignal);
       process.off("SIGTERM", onSignal);
-      process.off("beforeExit", restoreStashSync);
+      process.off("SIGHUP", onSignal);
     };
-  }, [restoreStashSync]);
+  }, [restoreStashSync, setStep]);
   const doStash = async () => {
     const ok = await stash();
     if (ok) {
       setStashed(true);
       stashedRef.current = true;
+      await writeStashGuard();
     }
-    setStep("remote");
+    if (mountedRef.current) setStep("remote");
   };
-  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs7(Box7, { marginBottom: 1, children: [
-      /* @__PURE__ */ jsx7(Text7, { bold: true, inverse: true, color: "white", children: " git-sync-tui " }),
-      /* @__PURE__ */ jsx7(Text7, { children: " " }),
-      /* @__PURE__ */ jsx7(Text7, { color: "gray", children: "\u4EA4\u4E92\u5F0F commit \u540C\u6B65\u5DE5\u5177 (cherry-pick --no-commit)" }),
-      stashed && /* @__PURE__ */ jsx7(Text7, { color: "yellow", children: " (\u5DF2\u81EA\u52A8 stash)" })
-    ] }),
-    step === "checking" && /* @__PURE__ */ jsx7(Spinner5, { label: "\u68C0\u67E5\u5DE5\u4F5C\u533A\u72B6\u6001..." }),
-    step === "stash-prompt" && /* @__PURE__ */ jsx7(
+  const doStashRecover = async () => {
+    const entry = await findStashEntry();
+    if (entry) {
+      await stashPop();
+    }
+    await removeStashGuard();
+    if (!mountedRef.current) return;
+    const clean = await isWorkingDirClean();
+    if (mountedRef.current) setStep(clean ? "remote" : "stash-prompt");
+  };
+  const skipStashRecover = async () => {
+    await removeStashGuard();
+    if (!mountedRef.current) return;
+    const clean = await isWorkingDirClean();
+    if (mountedRef.current) setStep(clean ? "remote" : "stash-prompt");
+  };
+  const goBack = useCallback2((fromStep) => {
+    const backMap = {
+      branch: "remote",
+      commits: "branch",
+      confirm: "commits"
+    };
+    const prev = backMap[fromStep];
+    if (prev) {
+      setStep(prev);
+    } else {
+      restoreStashSync();
+      exit();
+    }
+  }, [setStep, restoreStashSync, exit]);
+  return /* @__PURE__ */ jsxs9(Box9, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx9(AppHeader, { step: STEP_NUMBER[step], stashed }),
+    step === "checking" && /* @__PURE__ */ jsx9(Spinner6, { label: "\u68C0\u67E5\u5DE5\u4F5C\u533A\u72B6\u6001..." }),
+    step === "stash-recovery" && inputReady && /* @__PURE__ */ jsx9(
+      StashRecovery,
+      {
+        timestamp: guardTimestamp,
+        onRecover: doStashRecover,
+        onSkip: skipStashRecover
+      }
+    ),
+    step === "stash-prompt" && inputReady && /* @__PURE__ */ jsx9(
       StashPrompt,
       {
         onConfirm: doStash,
         onSkip: () => setStep("remote")
       }
     ),
-    step === "remote" && /* @__PURE__ */ jsx7(
+    step === "remote" && inputReady && /* @__PURE__ */ jsx9(
       RemoteSelect,
       {
         onSelect: (r) => {
           setRemote(r);
           setStep("branch");
-        }
+        },
+        onBack: () => goBack("remote")
       }
     ),
-    step === "branch" && /* @__PURE__ */ jsx7(
+    step === "branch" && inputReady && /* @__PURE__ */ jsx9(
       BranchSelect,
       {
         remote,
         onSelect: (b) => {
           setBranch(b);
           setStep("commits");
-        }
+        },
+        onBack: () => goBack("branch")
       }
     ),
-    step === "commits" && /* @__PURE__ */ jsx7(
+    step === "commits" && inputReady && /* @__PURE__ */ jsx9(
       CommitList,
       {
         remote,
@@ -873,10 +1127,11 @@ function App() {
           const merge = await hasMergeCommits(hashes);
           setHasMerge(merge);
           setStep("confirm");
-        }
+        },
+        onBack: () => goBack("commits")
       }
     ),
-    step === "confirm" && /* @__PURE__ */ jsx7(
+    step === "confirm" && inputReady && /* @__PURE__ */ jsx9(
       ConfirmPanel,
       {
         commits,
@@ -885,10 +1140,10 @@ function App() {
         useMainline,
         onToggleMainline: () => setUseMainline((v) => !v),
         onConfirm: () => setStep("result"),
-        onCancel: () => setStep("commits")
+        onCancel: () => goBack("confirm")
       }
     ),
-    step === "result" && /* @__PURE__ */ jsx7(
+    step === "result" && /* @__PURE__ */ jsx9(
       ResultPanel,
       {
         selectedHashes,
@@ -905,7 +1160,7 @@ function App() {
 }
 
 // src/cli.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var cli = meow(
   `
   \u7528\u6CD5
@@ -932,4 +1187,4 @@ var cli = meow(
     importMeta: import.meta
   }
 );
-render(/* @__PURE__ */ jsx8(App, {}));
+render(/* @__PURE__ */ jsx10(App, {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "git-sync-tui",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "packageManager": "pnpm@10.32.1",
   "description": "Interactive TUI tool for cross-repo git commit synchronization (cherry-pick --no-commit)",
   "author": "KiWi233333",
@@ -31,7 +31,7 @@
   },
   "scripts": {
     "start": "tsx src/cli.tsx",
-    "dev": "tsx watch src/cli.tsx",
+    "dev": "tsx src/cli.tsx",
     "build": "tsup",
     "prepublishOnly": "pnpm run build",
     "release": "pnpm run release:patch",