ui(polish) blend background color with theme (#18802)

packages/cli/src/ui/contexts/TerminalContext.test.tsx

@@ -29,6 +29,11 @@ vi.mock('ink', () => ({
   useStdin: () => ({
     stdin: mockStdin,
   }),
+  useStdout: () => ({
+    stdout: {
+      write: vi.fn(),
+    },
+  }),
 }));
 
 const TestComponent = ({ onColor }: { onColor: (c: string) => void }) => {

packages/cli/src/ui/contexts/TerminalContext.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useStdin } from 'ink';
+import { useStdin, useStdout } from 'ink';
 import type React from 'react';
 import {
   createContext,
@@ -20,6 +20,7 @@ export type TerminalEventHandler = (event: string) => void;
 interface TerminalContextValue {
   subscribe: (handler: TerminalEventHandler) => void;
   unsubscribe: (handler: TerminalEventHandler) => void;
+  queryTerminalBackground: () => Promise<void>;
 }
 
 const TerminalContext = createContext<TerminalContextValue | undefined>(
@@ -38,6 +39,7 @@ export function useTerminalContext() {
 
 export function TerminalProvider({ children }: { children: React.ReactNode }) {
   const { stdin } = useStdin();
+  const { stdout } = useStdout();
   const subscribers = useRef<Set<TerminalEventHandler>>(new Set()).current;
   const bufferRef = useRef('');
 
@@ -55,6 +57,23 @@ export function TerminalProvider({ children }: { children: React.ReactNode }) {
     [subscribers],
   );
 
+  const queryTerminalBackground = useCallback(
+    async () =>
+      new Promise<void>((resolve) => {
+        const handler = () => {
+          unsubscribe(handler);
+          resolve();
+        };
+        subscribe(handler);
+        TerminalCapabilityManager.queryBackgroundColor(stdout);
+        setTimeout(() => {
+          unsubscribe(handler);
+          resolve();
+        }, 100);
+      }),
+    [stdout, subscribe, unsubscribe],
+  );
+
   useEffect(() => {
     const handleData = (data: Buffer | string) => {
       bufferRef.current +=
@@ -89,7 +108,9 @@ export function TerminalProvider({ children }: { children: React.ReactNode }) {
   }, [stdin, subscribers]);
 
   return (
-    <TerminalContext.Provider value={{ subscribe, unsubscribe }}>
+    <TerminalContext.Provider
+      value={{ subscribe, unsubscribe, queryTerminalBackground }}
+    >
       {children}
     </TerminalContext.Provider>
   );

packages/cli/src/ui/contexts/UIActionsContext.tsx

@@ -20,7 +20,10 @@ import type { SessionInfo } from '../../utils/sessionUtils.js';
 import { type NewAgentsChoice } from '../components/NewAgentsNotification.js';
 
 export interface UIActions {
-  handleThemeSelect: (themeName: string, scope: LoadableSettingScope) => void;
+  handleThemeSelect: (
+    themeName: string,
+    scope: LoadableSettingScope,
+  ) => Promise<void>;
   closeThemeDialog: () => void;
   handleThemeHighlight: (themeName: string | undefined) => void;
   handleAuthSelect: (