feat: enhance update prompt UI

qorzj · qorzj · commit 35ea8745a200 · 2026-04-29T14:55:28.000+08:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/ui/UpdatePrompt.tsx b/src/ui/UpdatePrompt.tsx
@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+
+export type UpdatePromptChoice = "install" | "ignore-once" | "ignore-version";
+
+type UpdatePromptOption = {
+  value: UpdatePromptChoice;
+  label: string;
+};
+
+type Props = {
+  currentVersion: string;
+  latestVersion: string;
+  installCommand: string;
+  onSelect: (choice: UpdatePromptChoice) => void;
+};
+
+export function UpdatePrompt({
+  currentVersion,
+  latestVersion,
+  installCommand,
+  onSelect
+}: Props): React.ReactElement {
+  const { exit } = useApp();
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const options: UpdatePromptOption[] = [
+    {
+      value: "install",
+      label: `Install the latest version with \`${installCommand}\``
+    },
+    {
+      value: "ignore-once",
+      label: "Ignore once"
+    },
+    {
+      value: "ignore-version",
+      label: `Ignore this version (${latestVersion})`
+    }
+  ];
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setSelectedIndex((index) => (index - 1 + options.length) % options.length);
+      return;
+    }
+    if (key.downArrow || key.tab) {
+      setSelectedIndex((index) => (index + 1) % options.length);
+      return;
+    }
+    if (key.return) {
+      onSelect(options[selectedIndex]?.value ?? "ignore-once");
+      exit();
+      return;
+    }
+    if (key.escape || (key.ctrl && (input === "c" || input === "C"))) {
+      onSelect("ignore-once");
+      exit();
+      return;
+    }
+    if (/^[1-3]$/.test(input)) {
+      onSelect(options[Number(input) - 1]?.value ?? "ignore-once");
+      exit();
+    }
+  });
+
+  return (
+    <Box flexDirection="column" marginY={1}>
+      <Text bold>
+        Deep Code latest version has been released: {currentVersion} -&gt; {latestVersion}
+      </Text>
+      <Box flexDirection="column" marginTop={1}>
+        {options.map((option, index) => {
+          const selected = index === selectedIndex;
+          return (
+            <Text key={option.value} color={selected ? "green" : undefined}>
+              {selected ? "> " : "  "}
+              {index + 1}. {option.label}
+            </Text>
+          );
+        })}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Use Up/Down to choose, Enter to confirm, Esc to ignore once.</Text>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/updateCheck.ts b/src/updateCheck.ts
@@ -1,8 +1,11 @@
 import { spawn } from "child_process";
+import React from "react";
 import * as fs from "fs";
 import * as os from "os";
 import * as path from "path";
-import * as readline from "readline/promises";
+import { render, type Instance } from "ink";
+import chalk from "chalk";
+import { UpdatePrompt, type UpdatePromptChoice } from "./ui/UpdatePrompt";
 
 export type PackageInfo = {
   name: string;
@@ -52,7 +55,7 @@ export async function promptForPendingUpdate(packageInfo: PackageInfo): Promise<
     const ok = await runNpmInstallGlobal(installSpec);
     if (ok) {
       writeUpdateState({ ...state, pending: null });
-      process.stdout.write("Deep Code has been updated. Please restart the CLI to use the new version.\n");
+      process.stdout.write(`\n${chalk.red("Deep Code has been updated. Please restart the CLI to use the new version.")}\n\n`);
     }
     return { installed: ok };
   }
@@ -129,29 +132,28 @@ async function promptUpdateChoice({
   latestVersion: string;
   installCommand: string;
 }): Promise<"install" | "ignore-once" | "ignore-version"> {
-  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
-  try {
-    process.stdout.write(`Deep Code latest version has been released: ${currentVersion} -> ${latestVersion}\n`);
-    process.stdout.write(`1. Install the latest version with \`${installCommand}\`\n`);
-    process.stdout.write("2. Ignore once\n");
-    process.stdout.write(`3. Ignore this version (${latestVersion})\n`);
-
-    while (true) {
-      const answer = (await rl.question("Choose 1, 2, or 3: ")).trim();
-      if (answer === "1") {
-        return "install";
-      }
-      if (answer === "2" || answer === "") {
-        return "ignore-once";
-      }
-      if (answer === "3") {
-        return "ignore-version";
+  return new Promise<UpdatePromptChoice>((resolve) => {
+    let selected = false;
+    let instance: Instance | null = null;
+    const handleSelect = (choice: UpdatePromptChoice): void => {
+      if (selected) {
+        return;
       }
-      process.stdout.write("Please enter 1, 2, or 3.\n");
-    }
-  } finally {
-    rl.close();
-  }
+      selected = true;
+      resolve(choice);
+      instance?.unmount();
+    };
+
+    instance = render(
+      React.createElement(UpdatePrompt, {
+        currentVersion,
+        latestVersion,
+        installCommand,
+        onSelect: handleSelect
+      }),
+      { exitOnCtrlC: false }
+    );
+  });
 }
 
 async function runNpmInstallGlobal(installSpec: string): Promise<boolean> {
