feat(desktop): improve floating pet controls

Author: DragonnZhang

apps/electron/src/renderer/components/pet/DesktopPet.tsx

@@ -3,19 +3,29 @@ import {
   useEffect,
   useRef,
   useState,
+  type MouseEvent as ReactMouseEvent,
   type PointerEvent as ReactPointerEvent,
 } from 'react';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ChevronDown, ChevronUp, Maximize2 } from 'lucide-react';
 import { usePetCompanion } from '@/pets/usePetCompanion';
 import { usePetActivityState } from '@/pets/usePetActivityState';
 import { usePetNotifications } from '@/pets/usePetNotifications';
+import { normalizePetSize } from '@/pets/pet-size';
 import { PetNotifications } from './PetNotifications';
 import { QwenPet } from './QwenPet';
 
 function ignoreDragError(promise: Promise<void> | undefined): void {
   void promise?.catch(() => {});
 }
 
+type ResizeState = {
+  pointerId: number;
+  startScreenX: number;
+  startScreenY: number;
+  startSize: number;
+};
+
 /**
  * Fills the transparent, always-on-top pet window. Everything is clustered at
  * the bottom-right: notification cards stack just above a small toggle, which
@@ -27,13 +37,22 @@ function ignoreDragError(promise: Promise<void> | undefined): void {
  * and the toggle are interactive; everything else passes through to the desktop.
  */
 export function DesktopPet() {
-  const { selectedPet, petEnabled } = usePetCompanion();
+  const { t } = useTranslation();
+  const { selectedPet, petEnabled, petSize, setPetEnabled, setPetSize } =
+    usePetCompanion();
   const state = usePetActivityState();
   const { items, dismiss } = usePetNotifications();
   const [collapsed, setCollapsed] = useState(false);
+  const [resizePreview, setResizePreview] = useState<number | null>(null);
+  const [contextMenu, setContextMenu] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
 
   const ignoringRef = useRef(true);
   const draggingRef = useRef(false);
+  const resizingRef = useRef<ResizeState | null>(null);
+  const resizePreviewRef = useRef<number | null>(null);
 
   const setIgnore = useCallback((ignore: boolean) => {
     if (ignore === ignoringRef.current) return;
@@ -44,21 +63,23 @@ export function DesktopPet() {
   useEffect(() => {
     setIgnore(true);
     const onMove = (event: MouseEvent) => {
-      if (draggingRef.current) return;
+      if (draggingRef.current || resizingRef.current) return;
       const el = document.elementFromPoint(event.clientX, event.clientY);
       const interactive = !!el?.closest?.('[data-pet-interactive]');
+      if (contextMenu && !interactive) setContextMenu(null);
       setIgnore(!interactive);
     };
     window.addEventListener('mousemove', onMove);
     return () => {
       window.removeEventListener('mousemove', onMove);
       ignoreDragError(window.electronAPI?.petWindowSetIgnoreMouse?.(false));
     };
-  }, [setIgnore]);
+  }, [contextMenu, setIgnore]);
 
   const onPointerDown = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
       if (event.button !== 0) return;
+      setContextMenu(null);
       draggingRef.current = true;
       event.currentTarget.setPointerCapture(event.pointerId);
       ignoreDragError(
@@ -89,8 +110,84 @@ export function DesktopPet() {
     [],
   );
 
+  const updateResizePreview = useCallback((size: number) => {
+    const normalized = normalizePetSize(size);
+    resizePreviewRef.current = normalized;
+    setResizePreview(normalized);
+  }, []);
+
+  const onResizePointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>) => {
+      if (event.button !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      setContextMenu(null);
+      resizingRef.current = {
+        pointerId: event.pointerId,
+        startScreenX: event.screenX,
+        startScreenY: event.screenY,
+        startSize: resizePreviewRef.current ?? petSize,
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      updateResizePreview(resizePreviewRef.current ?? petSize);
+    },
+    [petSize, updateResizePreview],
+  );
+
+  const onPetContextMenu = useCallback(
+    (event: ReactMouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setContextMenu({
+        x: Math.min(Math.max(8, event.clientX), window.innerWidth - 100),
+        y: Math.min(Math.max(8, event.clientY), window.innerHeight - 44),
+      });
+    },
+    [],
+  );
+
+  const onClosePet = useCallback(() => {
+    setContextMenu(null);
+    setPetEnabled(false);
+    ignoreDragError(window.electronAPI?.setPetWindowEnabled?.(false));
+  }, [setPetEnabled]);
+
+  const onResizePointerMove = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>) => {
+      const resize = resizingRef.current;
+      if (!resize || resize.pointerId !== event.pointerId) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const deltaX = event.screenX - resize.startScreenX;
+      const deltaY = event.screenY - resize.startScreenY;
+      const delta = Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : deltaY;
+      updateResizePreview(resize.startSize + delta);
+    },
+    [updateResizePreview],
+  );
+
+  const onResizePointerEnd = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>) => {
+      const resize = resizingRef.current;
+      if (!resize || resize.pointerId !== event.pointerId) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      const nextSize = resizePreviewRef.current ?? resize.startSize;
+      resizingRef.current = null;
+      resizePreviewRef.current = null;
+      setResizePreview(null);
+      setPetSize(nextSize);
+    },
+    [setPetSize],
+  );
+
   if (!petEnabled) return null;
 
+  const displayPetSize = resizePreview ?? petSize;
+
   return (
     <div className="pointer-events-none fixed inset-0 flex flex-col items-end justify-end gap-1.5 p-2.5">
       {items.length > 0 && !collapsed && (
@@ -120,20 +217,55 @@ export function DesktopPet() {
 
       <div
         data-pet-interactive
-        className="pointer-events-auto cursor-grab active:cursor-grabbing"
+        className="group relative pointer-events-auto cursor-grab active:cursor-grabbing"
         title={selectedPet.displayName}
         onPointerDown={onPointerDown}
         onPointerMove={onPointerMove}
         onPointerUp={onPointerEnd}
         onPointerCancel={onPointerEnd}
+        onContextMenu={onPetContextMenu}
       >
         <QwenPet
           spritesheetUrl={selectedPet.spritesheetUrl}
           state={state}
-          size={96}
+          size={displayPetSize}
           className="drop-shadow-[0_3px_6px_rgba(0,0,0,0.35)]"
         />
+        <button
+          type="button"
+          data-pet-interactive
+          aria-label="resize pet"
+          title="Resize pet"
+          onPointerDown={onResizePointerDown}
+          onPointerMove={onResizePointerMove}
+          onPointerUp={onResizePointerEnd}
+          onPointerCancel={onResizePointerEnd}
+          className={`absolute -bottom-0.5 -right-0.5 flex h-6 w-6 cursor-nwse-resize items-center justify-center rounded-lg border border-white/15 bg-neutral-900/55 text-white shadow-[0_3px_10px_rgba(0,0,0,0.28)] backdrop-blur transition-opacity hover:bg-neutral-900/70 focus-visible:opacity-100 ${
+            resizePreview == null
+              ? 'opacity-0 group-hover:opacity-100'
+              : 'opacity-100'
+          }`}
+        >
+          <Maximize2 className="h-3 w-3" />
+        </button>
       </div>
+
+      {contextMenu && (
+        <div
+          data-pet-interactive
+          className="pointer-events-auto absolute z-50 rounded-md border border-neutral-200 bg-white p-0.5 text-neutral-800 shadow-[0_5px_16px_rgba(0,0,0,0.16)]"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+          onContextMenu={(event) => event.preventDefault()}
+        >
+          <button
+            type="button"
+            onClick={onClosePet}
+            className="flex h-6 min-w-20 items-center rounded px-2 text-xs hover:bg-neutral-100"
+          >
+            {t('pet.menu.close')}
+          </button>
+        </div>
+      )}
     </div>
   );
 }

apps/electron/src/renderer/components/pet/PetWindowController.tsx

@@ -7,11 +7,12 @@ import { usePetCompanion } from '@/pets/usePetCompanion';
  * selection change so the main process can reload the window with the new pet.
  */
 export function PetWindowController() {
-  const { petEnabled, selectedPetId } = usePetCompanion();
+  const { petEnabled, petSettingsLoaded, selectedPetId } = usePetCompanion();
 
   useEffect(() => {
+    if (!petSettingsLoaded) return;
     void window.electronAPI?.setPetWindowEnabled?.(petEnabled);
-  }, [petEnabled, selectedPetId]);
+  }, [petEnabled, petSettingsLoaded, selectedPetId]);
 
   return null;
 }

apps/electron/src/renderer/pages/settings/AppearanceSettingsPage.tsx

@@ -16,7 +16,7 @@ import { EditPopover, EditButton, getEditConfig } from '@/components/ui/EditPopo
 import { useTheme } from '@/context/ThemeContext'
 import { useAppShellContext } from '@/context/AppShellContext'
 import { routes } from '@/lib/navigate'
-import { Monitor, Sun, Moon } from 'lucide-react'
+import { FolderOpen, Monitor, RefreshCw, Sun, Moon } from 'lucide-react'
 import type { DetailsPageMeta } from '@/lib/navigation-registry'
 import type { ToolIconMapping } from '../../../shared/types'
 
@@ -154,6 +154,14 @@ export default function AppearanceSettingsPage() {
       setPetsFolder(`${home}/.qwen/pets`),
     )
   }, [])
+  const handleOpenPetsFolder = useCallback(async () => {
+    try {
+      const path = await window.electronAPI?.openPetsFolder?.()
+      if (path) setPetsFolder(path)
+    } catch {
+      // Keep the settings page usable if the OS folder open request fails.
+    }
+  }, [])
 
   // Load preset themes on mount
   useEffect(() => {
@@ -416,16 +424,34 @@ export default function AppearanceSettingsPage() {
                   ))}
                   {petEnabled && (
                     <SettingsRow
-                      label={t("settings.appearance.petCustom")}
+                      label={
+                        <div className="space-y-1">
+                          <div>{t("settings.appearance.petCustom")}</div>
+                          <div className="text-xs font-normal leading-4 text-muted-foreground">
+                            {t("settings.appearance.petCustomHint")}
+                          </div>
+                        </div>
+                      }
                       description={petsFolder ?? '~/.qwen/pets'}
                       action={
-                        <button
-                          type="button"
-                          onClick={() => { void refreshCustomPets() }}
-                          className="inline-flex items-center h-8 px-3 text-sm rounded-lg bg-background shadow-minimal hover:bg-foreground/[0.02] transition-colors"
-                        >
-                          {t("settings.appearance.petRefresh")}
-                        </button>
+                        <div className="flex items-center gap-2">
+                          <button
+                            type="button"
+                            onClick={handleOpenPetsFolder}
+                            className="inline-flex items-center h-8 gap-1.5 px-3 text-sm rounded-lg bg-background shadow-minimal hover:bg-foreground/[0.02] transition-colors"
+                          >
+                            <FolderOpen className="h-3.5 w-3.5" />
+                            {t("settings.appearance.petOpenFolder")}
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => { void refreshCustomPets() }}
+                            className="inline-flex items-center h-8 gap-1.5 px-3 text-sm rounded-lg bg-background shadow-minimal hover:bg-foreground/[0.02] transition-colors"
+                          >
+                            <RefreshCw className="h-3.5 w-3.5" />
+                            {t("settings.appearance.petRefresh")}
+                          </button>
+                        </div>
                       }
                     />
                   )}

apps/electron/src/renderer/pets/pet-atoms.ts

@@ -2,7 +2,10 @@
 import { atom } from 'jotai';
 import type { CustomPetEntry } from '@craft-agent/shared/config';
 import { DEFAULT_PET_ID } from './registry';
+import { DEFAULT_PET_SIZE } from './pet-size';
 
 export const selectedPetIdAtom = atom<string>(DEFAULT_PET_ID);
 export const petEnabledAtom = atom<boolean>(true);
+export const petSettingsLoadedAtom = atom<boolean>(false);
+export const petSizeAtom = atom<number>(DEFAULT_PET_SIZE);
 export const customPetsAtom = atom<CustomPetEntry[]>([]);

apps/electron/src/renderer/pets/pet-size.ts

@@ -0,0 +1,7 @@
+export const DEFAULT_PET_SIZE = 96;
+export const MIN_PET_SIZE = 64;
+export const MAX_PET_SIZE = 240;
+
+export function normalizePetSize(size: number): number {
+  return Math.round(Math.min(MAX_PET_SIZE, Math.max(MIN_PET_SIZE, size)));
+}