feat(mobile): split controls into separate Agent and Model buttons (#293)

* feat(mobile): split controls into separate Agent and Model buttons

- Add MobileAgentButton with tap-to-cycle and long-press-to-open behavior
- Add MobileModelButton for direct model panel access
- Remove agent selection from UnifiedControlsDrawer for cleaner mobile UX
- Agent cycling accessible via Tab key shortcut

* fix(mobile): optimize controls layout and touch handling

---------

Co-authored-by: Jovines <jovines@qq.com>

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { useConfigStore } from '@/stores/useConfigStore';
+import { getModelDisplayName } from './mobileControlsUtils';
+
+interface MobileModelButtonProps {
+    onOpenModel: () => void;
+    className?: string;
+}
+
+export const MobileModelButton: React.FC<MobileModelButtonProps> = ({ onOpenModel, className }) => {
+    const { currentModelId, getCurrentProvider } = useConfigStore();
+    const currentProvider = getCurrentProvider();
+    const modelLabel = getModelDisplayName(currentProvider, currentModelId);
+
+    return (
+        <button
+            type="button"
+            onClick={onOpenModel}
+            className={cn(
+                'inline-flex min-w-0 items-center justify-center',
+                'rounded-lg border border-border/50 px-1.5',
+                'typography-micro font-medium text-foreground/80',
+                'focus:outline-none hover:bg-[var(--interactive-hover)]',
+                className
+            )}
+            style={{ height: '26px', maxHeight: '26px', minHeight: '26px' }}
+            title={modelLabel}
+        >
+            <span className="min-w-0 truncate">{modelLabel}</span>
+        </button>
+    );
+};
+
+export default MobileModelButton;