fix(controller): cap indexed options per dropdown container

A select/dropdown with hundreds of options (common in Element UI / Avue
forms) puts every option into the simplified DOM, so the LLM request can
exceed the server limit (HTTP 413).

Index at most 20 options per dropdown container and fold the rest into a
hint (e.g. "... 80 more option(s) not shown ..."), keeping the payload
bounded while telling the LLM that more options exist.

Author: zhang17-24

packages/page-controller/src/dom/dom_tree/dropdown-cap.test.ts

@@ -0,0 +1,103 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { flatTreeToString } from '../index'
+import domTree from './index.js'
+
+function setupSizes() {
+	Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+		configurable: true,
+		get() {
+			return 100
+		},
+	})
+	Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+		configurable: true,
+		get() {
+			return 30
+		},
+	})
+}
+
+function buildDropdown(html: string) {
+	return domTree({
+		doHighlightElements: false,
+		viewportExpansion: -1,
+		interactiveBlacklist: [],
+		interactiveWhitelist: [],
+	}) as any
+}
+
+describe('dropdown option cap (#348)', () => {
+	beforeEach(() => {
+		setupSizes()
+		document.body.innerHTML = ''
+	})
+
+	it('indexes at most 20 options per dropdown container', () => {
+		const options = Array.from(
+			{ length: 25 },
+			(_, i) => `<li class="el-select-dropdown__item" style="cursor:pointer">选项 ${i}</li>`
+		)
+		document.body.innerHTML = `
+			<div class="el-select-dropdown">
+				<ul class="el-select-dropdown__list">${options.join('')}</ul>
+			</div>
+		`
+		const tree = buildDropdown(document.body.innerHTML)
+		const liNodes = Object.values(tree.map).filter((n: any) => n.tagName === 'li')
+		const indexed = liNodes.filter((n: any) => typeof n.highlightIndex === 'number')
+		expect(indexed.length).toBe(20)
+	})
+
+	it('records dropped options on the container', () => {
+		const options = Array.from(
+			{ length: 25 },
+			(_, i) => `<li class="el-select-dropdown__item" style="cursor:pointer">选项 ${i}</li>`
+		)
+		document.body.innerHTML = `
+			<div class="el-select-dropdown">
+				<ul class="el-select-dropdown__list">${options.join('')}</ul>
+			</div>
+		`
+		const tree = buildDropdown(document.body.innerHTML)
+		const container = Object.values(tree.map).find(
+			(n: any) => n.tagName === 'div' && n.extra?.droppedOptions === 5
+		)
+		expect(container).toBeDefined()
+	})
+
+	it('renders a folded-options hint in the simplified HTML', () => {
+		const options = Array.from(
+			{ length: 25 },
+			(_, i) => `<li class="el-select-dropdown__item" style="cursor:pointer">选项 ${i}</li>`
+		)
+		document.body.innerHTML = `
+			<div class="el-select-dropdown">
+				<ul class="el-select-dropdown__list">${options.join('')}</ul>
+			</div>
+		`
+		const tree = buildDropdown(document.body.innerHTML)
+		const html = flatTreeToString(tree)
+		expect(html).toContain('5 more option(s) not shown')
+		// only the first 20 options carry indexes
+		expect(html).toContain('[19]<li >选项 19')
+		expect(html).not.toContain('选项 24')
+	})
+
+	it('does not cap dropdowns with few options', () => {
+		const options = Array.from(
+			{ length: 6 },
+			(_, i) => `<li class="el-select-dropdown__item" style="cursor:pointer">选项 ${i}</li>`
+		)
+		document.body.innerHTML = `
+			<div class="el-select-dropdown">
+				<ul class="el-select-dropdown__list">${options.join('')}</ul>
+			</div>
+		`
+		const tree = buildDropdown(document.body.innerHTML)
+		const liNodes = Object.values(tree.map).filter((n: any) => n.tagName === 'li')
+		expect(liNodes.filter((n: any) => typeof n.highlightIndex === 'number').length).toBe(6)
+		const html = flatTreeToString(tree)
+		expect(html).not.toContain('not shown')
+	})
+})

packages/page-controller/src/dom/dom_tree/index.js

@@ -720,6 +720,21 @@ export default (
 		return Boolean(element.closest(DROPDOWN_CONTAINER_SELECTOR))
 	}
 
+	/**
+	 * @edit cap dropdown options per container (#348)
+	 * A select/dropdown with hundreds of options would blow up the LLM payload;
+	 * index at most MAX_DROPDOWN_OPTIONS_PER_CONTAINER options and fold the rest
+	 * into a hint on the container.
+	 */
+	const MAX_DROPDOWN_OPTIONS_PER_CONTAINER = 20
+	const dropdownOptionCounts = new WeakMap() // container element -> indexed option count
+
+	function getDropdownOptionContainer(element) {
+		if (!element || element.nodeType !== Node.ELEMENT_NODE) return null
+		if (!isDropdownOptionElement(element)) return null
+		return element.closest(DROPDOWN_CONTAINER_SELECTOR)
+	}
+
 	/**
 	 * Checks if an element is interactive.
 	 *
@@ -1677,6 +1692,24 @@ export default (
 			if (nodeData.isVisible) {
 				nodeData.isTopElement = isTopElement(node)
 
+				/**
+				 * @edit cap dropdown options per container (#348)
+				 * A dropdown with hundreds of options would blow up the LLM payload;
+				 * index at most MAX_DROPDOWN_OPTIONS_PER_CONTAINER options per container
+				 * and fold the excess into a hint on the container.
+				 */
+				if (isDropdownOptionElement(node)) {
+					const container = getDropdownOptionContainer(node)
+					const used = dropdownOptionCounts.get(container) || 0
+					if (used >= MAX_DROPDOWN_OPTIONS_PER_CONTAINER) {
+						addExtraData(container, {
+							droppedOptions: (extraData.get(container)?.droppedOptions || 0) + 1,
+						})
+						return null // Skip excess options entirely (text included)
+					}
+					dropdownOptionCounts.set(container, used + 1)
+				}
+
 				// Special handling for ARIA menu containers - check interactivity even if not top element
 				const role = node.getAttribute('role')
 				const isMenuContainer = role === 'menu' || role === 'menubar' || role === 'listbox'

packages/page-controller/src/dom/index.ts

@@ -432,6 +432,14 @@ export function flatTreeToString(
 				processNode(child, nextDepth, result)
 			}
 
+			/**
+			 * @edit dropdown options are capped per container (#348);
+			 * render a hint so the LLM knows more options exist.
+			 */
+			if (node.extra?.droppedOptions) {
+				result.push(`${depthStr}... ${node.extra.droppedOptions} more option(s) not shown ...`)
+			}
+
 			if (emitSemantic) {
 				// empty tag should be removed
 				if (result.length === mark + 1) {