refactor: simplify mobile agent button interaction (#416)

packages/ui/src/components/chat/ChatInput.tsx

@@ -2082,7 +2082,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                                     <div className="flex items-center min-w-0 gap-x-1 justify-end">
                                         <div className="flex items-center gap-x-1 min-w-0 max-w-[60vw] flex-shrink">
                                             <MobileModelButton onOpenModel={handleOpenMobileControls} className="min-w-0 flex-shrink" />
-                                            <MobileAgentButton onCycleAgent={handleCycleAgent} onOpenAgentPanel={() => setMobileControlsPanel('agent')} className="min-w-0 flex-shrink" />
+                                            <MobileAgentButton onOpenAgentPanel={() => setMobileControlsPanel('agent')} className="min-w-0 flex-shrink" />
                                         </div>
                                         <div className="flex items-center gap-x-1 flex-shrink-0">
                                             <BrowserVoiceButton />

packages/ui/src/components/chat/MobileAgentButton.tsx

@@ -6,12 +6,11 @@ import { getAgentDisplayName } from './mobileControlsUtils';
 import { getAgentColor } from '@/lib/agentColors';
 
 interface MobileAgentButtonProps {
-    onCycleAgent: () => void;
     onOpenAgentPanel: () => void;
     className?: string;
 }
 
-export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onCycleAgent, onOpenAgentPanel, className }) => {
+export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onOpenAgentPanel, className }) => {
     const { currentAgentName, getVisibleAgents } = useConfigStore();
     const currentSessionId = useSessionStore((state) => state.currentSessionId);
     const sessionAgentName = useSessionStore((state) =>
@@ -23,56 +22,16 @@ export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onCycleAge
     const agentLabel = getAgentDisplayName(agents, uiAgentName);
     const agentColor = getAgentColor(uiAgentName);
 
-    const longPressTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-    const isLongPressRef = React.useRef(false);
-
-    const handlePointerDown = (event: React.PointerEvent) => {
-        event.preventDefault();
-        isLongPressRef.current = false;
-        longPressTimerRef.current = setTimeout(() => {
-            isLongPressRef.current = true;
-            onOpenAgentPanel();
-        }, 500);
-    };
-
-    const handlePointerUp = () => {
-        if (longPressTimerRef.current) {
-            clearTimeout(longPressTimerRef.current);
-            longPressTimerRef.current = null;
-        }
-        if (!isLongPressRef.current) {
-            onCycleAgent();
-        }
-    };
-
-    const handlePointerLeave = () => {
-        if (longPressTimerRef.current) {
-            clearTimeout(longPressTimerRef.current);
-            longPressTimerRef.current = null;
-        }
-    };
-
-    React.useEffect(() => {
-        return () => {
-            if (longPressTimerRef.current) {
-                clearTimeout(longPressTimerRef.current);
-            }
-        };
-    }, []);
-
     return (
         <button
             type="button"
-            onPointerDown={handlePointerDown}
+            onClick={onOpenAgentPanel}
-            onPointerUp={handlePointerUp}
-            onPointerLeave={handlePointerLeave}
-            onContextMenu={(e) => e.preventDefault()}
             className={cn(
                 'inline-flex min-w-0 items-center select-none',
                 'rounded-lg border border-border/50 px-1.5',
                 'typography-micro font-medium',
                 'focus:outline-none hover:bg-[var(--interactive-hover)]',
-                'touch-pan-x',
+                'touch-manipulation active:scale-95 transition-transform',
                 className
             )}
             style={{

packages/ui/src/components/chat/ModelControls.tsx

@@ -1762,9 +1762,27 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                 open={activeMobilePanel === 'agent'}
                 onClose={closeMobilePanel}
                 title="Select agent"
+                contentMaxHeightClassName="max-h-[min(52dvh,360px)]"
+                footer={(
+                    <div className="flex items-center justify-between">
+                        <span
+                            className={cn(
+                                'typography-meta font-medium',
+                                approveEditsDisabled ? 'text-muted-foreground' : 'text-foreground'
+                            )}
+                        >
+                            Auto-approve edits
+                        </span>
+                        <Switch
+                            checked={approveEditsChecked}
+                            disabled={approveEditsDisabled}
+                            onCheckedChange={handleApproveEditsToggle}
+                        />
+                    </div>
+                )}
             >
-                <div className="flex flex-col gap-1.5">
+                <div className="flex flex-col gap-2">
-                    {primaryAgents.map((agent) => {
+                    {selectableDesktopAgents.map((agent) => {
                         const isSelected = agent.name === uiAgentName;
                         const agentColor = getAgentColor(agent.name);
                         return (
@@ -1772,46 +1790,36 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
                                 key={agent.name}
                                 type="button"
                                 className={cn(
-                                    'flex w-full flex-col gap-1 rounded-xl border px-2 py-1.5 text-left',
+                                    'flex w-full flex-col gap-1.5 rounded-xl border px-3 py-2.5 text-left',
-                                    'focus:outline-none focus-visible:ring-1 focus-visible:ring-primary agent-list-item',
+                                    'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary',
-                                    'touch-manipulation cursor-pointer',
+                                    'touch-manipulation cursor-pointer transition-colors',
-                                    agentColor.class,
+                                    'active:bg-interactive-hover',
-                                    isSelected ? 'active' : 'border-border/40'
+                                    isSelected 
+                                        ? 'border-primary/50 bg-interactive-selection/20' 
+                                        : 'border-border/40 hover:bg-interactive-hover/50'
                                 )}
                                 onClick={() => handleAgentChange(agent.name)}
                             >
-                                <div className="flex items-center gap-1.5">
+                                <div className="flex items-center gap-2">
-                                    <div className={cn('h-2 w-2 rounded-full', agentColor.class)} />
+                                    <div className={cn('h-2.5 w-2.5 rounded-full flex-shrink-0', agentColor.class)} />
                                     <span
-                                        className="typography-meta font-medium text-foreground"
+                                        className="typography-ui-label font-semibold"
                                         style={isSelected ? { color: `var(${agentColor.var})` } : undefined}
                                     >
                                         {capitalizeAgentName(agent.name)}
                                     </span>
+                                    {isSelected && (
+                                        <RiCheckLine className="h-4 w-4 text-primary ml-auto flex-shrink-0" />
+                                    )}
                                 </div>
                                 {agent.description && (
-                                    <span className="typography-micro text-muted-foreground">
+                                    <span className="typography-meta text-muted-foreground pl-4.5">
                                         {agent.description}
                                     </span>
                                 )}
                             </button>
                         );
                     })}
-                    <div className="rounded-xl bg-transparent">
-                        <div className="flex items-center justify-between px-2 py-2">
-                            <span className={cn(
-                                'typography-meta font-medium',
-                                approveEditsDisabled ? 'text-muted-foreground' : 'text-foreground'
-                            )}>
-                                Auto-approve edits
-                            </span>
-                            <Switch
-                                checked={approveEditsChecked}
-                                disabled={approveEditsDisabled}
-                                onCheckedChange={handleApproveEditsToggle}
-                            />
-                        </div>
-                    </div>
                 </div>
             </MobileOverlayPanel>
         );