feat: add settings UI for terminal copy-on-select

Author: pallyoung

packages/web/src/features/settings/components/settings-page.test.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../../atoms/connection";
 import { activeWorkspaceIdAtom } from "../../../atoms/workspaces";
 import { CommandResultError } from "../../../ws/client";
+import { terminalPreferencesAtom } from "../../terminal-panel/preferences";
 import { SettingsPage } from "./settings-page";
 
 const viewportMocks = vi.hoisted(() => ({
@@ -1022,6 +1023,103 @@ describe("SettingsPage", () => {
     expect(screen.getByRole("button", { name: "标准" })).toHaveAttribute("aria-pressed", "false");
   });
 
+  it("renders the copy-on-select switch from loaded appearance settings", async () => {
+    const sendCommand = vi.fn().mockImplementation(async (op: string) => {
+      if (op === "settings.get") {
+        return {
+          "appearance.terminalCopyOnSelect": true,
+        };
+      }
+      return {};
+    });
+    const store = createConnectedStore(sendCommand);
+
+    renderSettingsPage(store);
+    fireEvent.click(screen.getByRole("button", { name: "外观" }));
+
+    expect(await screen.findByRole("switch", { name: "选中自动复制" })).toHaveAttribute(
+      "aria-checked",
+      "true"
+    );
+    expect(store.get(terminalPreferencesAtom)).toEqual({ copyOnSelect: true });
+  });
+
+  it("updates copy-on-select through the appearance switch and syncs the global atom", async () => {
+    const sendCommand = vi.fn().mockImplementation(async (op: string) => {
+      if (op === "settings.get") {
+        return {
+          "appearance.terminalCopyOnSelect": false,
+        };
+      }
+      return {};
+    });
+    const store = createConnectedStore(sendCommand);
+
+    renderSettingsPage(store);
+    fireEvent.click(screen.getByRole("button", { name: "外观" }));
+    fireEvent.click(await screen.findByRole("switch", { name: "选中自动复制" }));
+
+    await waitFor(() => {
+      expect(sendCommand).toHaveBeenCalledWith(
+        "settings.update",
+        {
+          settings: {
+            appearance: {
+              terminalCopyOnSelect: true,
+            },
+          },
+        },
+        undefined
+      );
+    });
+
+    expect(store.get(terminalPreferencesAtom)).toEqual({ copyOnSelect: true });
+  });
+
+  it("preserves copy-on-select when a stale settings load resolves afterward", async () => {
+    let resolveSettingsGet: ((value: Record<string, unknown>) => void) | undefined;
+    const settingsGetPromise = new Promise<Record<string, unknown>>((resolve) => {
+      resolveSettingsGet = resolve;
+    });
+    const sendCommand = vi.fn().mockImplementation(async (op: string) => {
+      if (op === "settings.get") {
+        return await settingsGetPromise;
+      }
+      return {};
+    });
+    const store = createConnectedStore(sendCommand);
+
+    renderSettingsPage(store);
+    fireEvent.click(screen.getByRole("button", { name: "外观" }));
+    fireEvent.click(await screen.findByRole("switch", { name: "选中自动复制" }));
+
+    await waitFor(() => {
+      expect(sendCommand).toHaveBeenCalledWith(
+        "settings.update",
+        {
+          settings: {
+            appearance: {
+              terminalCopyOnSelect: true,
+            },
+          },
+        },
+        undefined
+      );
+    });
+
+    await act(async () => {
+      resolveSettingsGet?.({
+        "appearance.terminalCopyOnSelect": false,
+      });
+      await settingsGetPromise;
+    });
+
+    expect(screen.getByRole("switch", { name: "选中自动复制" })).toHaveAttribute(
+      "aria-checked",
+      "true"
+    );
+  });
+
   it("updates language selection through the shared appearance pills", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "settings.get") {

packages/web/src/features/settings/components/settings-page.tsx

@@ -25,6 +25,10 @@ import { useViewport } from "../../../hooks/use-viewport";
 import { useTranslation } from "../../../lib/i18n";
 import { notificationPreferencesAtom } from "../../notifications/atoms";
 import { MobilePageHeader } from "../../shared/components/mobile-page-header";
+import {
+  resolveTerminalCopyOnSelectSetting,
+  terminalPreferencesAtom,
+} from "../../terminal-panel/preferences";
 import { type ProviderInfo, ProviderSettings } from "./provider-settings";
 import { resolveSettingsExitTargetFromBrowserHistory } from "./settings-navigation";
 import {
@@ -147,6 +151,7 @@ export function SettingsPage() {
   const [terminalRenderer, setTerminalRendererState] = useState<"standard" | "compatibility">(
     "standard"
   );
+  const [terminalCopyOnSelect, setTerminalCopyOnSelectState] = useState(false);
   const [providerAdditionalArgsById, setProviderAdditionalArgsById] = useState<
     Record<string, string>
   >({});
@@ -156,10 +161,12 @@ export function SettingsPage() {
   const [locale, setLocaleState] = useAtom(localeAtom);
   const [theme, setTheme] = useAtom(themeAtom);
   const setNotificationPreferences = useSetAtom(notificationPreferencesAtom);
+  const setTerminalPreferences = useSetAtom(terminalPreferencesAtom);
   const settingsLoadFailedUnknownRef = useRef(settingsLoadFailedUnknown);
   const appearanceSelectionVersionRef = useRef({
     locale: 0,
     terminalRenderer: 0,
+    terminalCopyOnSelect: 0,
   });
   const detailSection =
     navigationState.kind === "detail" ? navigationState.section : navigationState.lastSection;
@@ -233,6 +240,14 @@ export function SettingsPage() {
           setTerminalRendererState(settings["appearance.terminalRenderer"]);
         }
       }
+      if (typeof settings["appearance.terminalCopyOnSelect"] === "boolean") {
+        if (
+          appearanceSelectionVersionRef.current.terminalCopyOnSelect ===
+          appearanceSelectionVersionAtRequestStart.terminalCopyOnSelect
+        ) {
+          setTerminalCopyOnSelectState(settings["appearance.terminalCopyOnSelect"]);
+        }
+      }
       if (settings["appearance.locale"] === "zh" || settings["appearance.locale"] === "en") {
         if (
           appearanceSelectionVersionRef.current.locale ===
@@ -241,14 +256,24 @@ export function SettingsPage() {
           setLocaleState(settings["appearance.locale"]);
         }
       }
+      setTerminalPreferences({
+        copyOnSelect: resolveTerminalCopyOnSelectSetting(settings),
+      });
       setProviderAdditionalArgsById(loadProviderAdditionalArgs(settings, providers));
     };
 
     void loadSettings();
     return () => {
       cancelled = true;
     };
-  }, [connectionStatus, dispatch, setLocaleState, setNotificationPreferences, settingsRefreshKey]);
+  }, [
+    connectionStatus,
+    dispatch,
+    setLocaleState,
+    setNotificationPreferences,
+    setTerminalPreferences,
+    settingsRefreshKey,
+  ]);
 
   const handleLocaleSelection = (value: "zh" | "en") => {
     appearanceSelectionVersionRef.current.locale += 1;
@@ -260,6 +285,12 @@ export function SettingsPage() {
     setTerminalRendererState(value);
   };
 
+  const handleTerminalCopyOnSelectSelection = (value: boolean) => {
+    appearanceSelectionVersionRef.current.terminalCopyOnSelect += 1;
+    setTerminalCopyOnSelectState(value);
+    setTerminalPreferences({ copyOnSelect: value });
+  };
+
   useEffect(() => {
     if (detailSection !== "providers") {
       setContentLayoutMode("default");
@@ -307,6 +338,8 @@ export function SettingsPage() {
             setLocale={handleLocaleSelection}
             terminalRenderer={terminalRenderer}
             setTerminalRenderer={handleTerminalRendererSelection}
+            terminalCopyOnSelect={terminalCopyOnSelect}
+            setTerminalCopyOnSelect={handleTerminalCopyOnSelectSelection}
             theme={theme}
             setTheme={setTheme}
           />
@@ -727,6 +760,8 @@ interface AppearanceSettingsProps {
   setLocale: (value: "zh" | "en") => void;
   terminalRenderer: "standard" | "compatibility";
   setTerminalRenderer: (value: "standard" | "compatibility") => void;
+  terminalCopyOnSelect: boolean;
+  setTerminalCopyOnSelect: (value: boolean) => void;
   theme: "dark" | "light";
   setTheme: (value: "dark" | "light") => void;
 }
@@ -736,6 +771,8 @@ function AppearanceSettings({
   setLocale,
   terminalRenderer,
   setTerminalRenderer,
+  terminalCopyOnSelect,
+  setTerminalCopyOnSelect,
   theme,
   setTheme,
 }: AppearanceSettingsProps) {
@@ -744,6 +781,8 @@ function AppearanceSettings({
   const themeDescId = useId();
   const terminalRendererTitleId = useId();
   const terminalRendererDescId = useId();
+  const copyOnSelectLabelId = useId();
+  const copyOnSelectDescId = useId();
   const languageTitleId = useId();
   const languageDescId = useId();
   const dispatch = useAtomValue(dispatchCommandAtom);
@@ -826,6 +865,27 @@ function AppearanceSettings({
             {t("settings.terminal_compatibility")}
           </Pill>
         </div>
+
+        <div className="settings-toggle-row">
+          <div className="settings-toggle-info">
+            <span className="settings-toggle-label" id={copyOnSelectLabelId}>
+              {t("settings.copy_on_select")}
+            </span>
+            <span className="settings-toggle-desc" id={copyOnSelectDescId}>
+              {t("settings.copy_on_select_hint")}
+            </span>
+          </div>
+          <Switch
+            aria-describedby={copyOnSelectDescId}
+            aria-labelledby={copyOnSelectLabelId}
+            checked={terminalCopyOnSelect}
+            className="settings-toggle"
+            onCheckedChange={(nextValue) => {
+              setTerminalCopyOnSelect(nextValue);
+              void saveSettings({ appearance: { terminalCopyOnSelect: nextValue } });
+            }}
+          />
+        </div>
       </div>
 
       <div className="settings-group">

packages/web/src/locales/en.json

@@ -476,6 +476,10 @@
     },
     "terminal_renderer": "Terminal Renderer",
     "terminal_renderer_hint": "Choose terminal rendering mode",
+    "copy_on_select": "Copy on select",
+    "copy_on_select_hint": "Automatically copy selected text to the system clipboard in desktop terminals",
+    "copy_on_select_failed_title": "Copy on select failed",
+    "copy_on_select_failed_body": "Use Ctrl/Cmd+C to copy manually",
     "terminal_standard": "Standard",
     "terminal_compatibility": "Compatibility Mode",
     "provider": {

packages/web/src/locales/zh.json

@@ -476,6 +476,10 @@
     },
     "terminal_renderer": "终端渲染器",
     "terminal_renderer_hint": "选择终端渲染模式",
+    "copy_on_select": "选中自动复制",
+    "copy_on_select_hint": "在桌面端终端中，选中文本后自动复制到系统剪贴板",
+    "copy_on_select_failed_title": "自动复制失败",
+    "copy_on_select_failed_body": "请使用 Ctrl/Cmd+C 手动复制",
     "terminal_standard": "标准",
     "terminal_compatibility": "兼容模式",
     "provider": {