fix(cli): make @ completion category tabs clickable

.qwen/e2e-tests/2026-08-03-completion-category-mouse.md

@@ -0,0 +1,66 @@
+# Completion Category Mouse Selection
+
+## Scope
+
+Verify that the tabbed `@` completion picker can switch to an exact category
+with a mouse click when terminal mouse tracking is enabled. Keyboard category
+navigation and suggestion-row mouse behavior must remain unchanged.
+
+## Baseline
+
+A released global `qwen` executable was not available in this environment, so
+the before-change Warp dry-run could not be repeated locally. The issue's SGR
+mouse reproduction reports that suggestion rows accept clicks while category
+labels do not. Source inspection on `upstream/main` confirms that suggestion
+rows have a mouse controller, while category labels have no refs or click
+handler.
+
+## Manual Scenario
+
+1. Run Qwen Code in Warp with `ui.mouseTracking` enabled and the terminal
+   buffer enabled.
+2. Open a workspace where `@` completion shows at least three tabs, such as
+   **All / Files / Sessions**.
+3. Click **Files**, then **Sessions**, then **All**.
+4. Confirm that each click activates the exact tab under the pointer, resets
+   the highlighted suggestion to the first visible result, and filters the
+   suggestion rows for that category.
+5. Confirm that clicking outside every tab does not change the active tab.
+6. While the tab bar is visible, confirm that bare `Left` / `Right` cycles the
+   categories. Press `Esc` to dismiss the picker and confirm the arrows return
+   to normal input-caret behavior.
+7. Set `ui.mouseTracking` to `false`, restart Qwen Code, and confirm that tab
+   clicks are not intercepted by Qwen Code.
+
+## Regression Checks
+
+- Only a left-button press activates a category; pointer movement and button
+  release do not.
+- The category hit area follows the rendered tab bounds in both normal and
+  overflow layouts.
+- Suggestion-row hover and click handling still use their existing controller.
+- Export completion, command search, and reverse search do not receive a
+  category-selection callback.
+
+## Automated Verification
+
+```bash
+cd packages/cli
+npx vitest run \
+  src/ui/components/CompletionCategoryMouseController.test.tsx \
+  src/ui/components/SuggestionsDisplay.mouse.test.tsx \
+  src/ui/components/InputPrompt.suggestionMouse.test.tsx \
+  src/ui/hooks/useCompletion.test.ts
+
+cd ../..
+npm run lint
+npm run build
+npm run typecheck
+```
+
+## Results
+
+- The focused mouse/category regression suite passes: 4 files, 41 tests.
+- Repository lint, build, and typecheck pass.
+- Manual Warp execution remains for reviewer verification because Warp and a
+  released global `qwen` executable were not available in this environment.

packages/cli/src/ui/components/CompletionCategoryMouseController.test.tsx

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type MutableRefObject } from 'react';
+import { type DOMElement } from 'ink';
+import { render } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { CompletionCategoryMouseController } from './CompletionCategoryMouseController.js';
+import { useMouseEvents } from '../hooks/useMouseEvents.js';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { type MouseEvent } from '../utils/mouse.js';
+import { findElementAtMouseEvent } from '../utils/mouse-hit.js';
+
+vi.mock('../hooks/useMouseEvents.js', () => ({ useMouseEvents: vi.fn() }));
+vi.mock('../hooks/useTerminalSize.js', () => ({ useTerminalSize: vi.fn() }));
+vi.mock('../utils/mouse-hit.js', () => ({ findElementAtMouseEvent: vi.fn() }));
+
+const ref = <T,>(current: T): MutableRefObject<T> => ({ current });
+
+function makeEvent(
+  partial: Partial<MouseEvent> & Pick<MouseEvent, 'name'>,
+): MouseEvent {
+  return {
+    col: 1,
+    row: 1,
+    shift: false,
+    meta: false,
+    ctrl: false,
+    button: 'left',
+    ...partial,
+  } as MouseEvent;
+}
+
+describe('CompletionCategoryMouseController', () => {
+  const containerNode = { tag: 'container' } as unknown as DOMElement;
+  const categoryNodes = [
+    { tag: 'all' },
+    { tag: 'file' },
+    { tag: 'session' },
+  ] as unknown as DOMElement[];
+  const categories = ['all', 'file', 'session'] as const;
+  let onSelectCategory: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    onSelectCategory = vi.fn();
+    vi.mocked(useTerminalSize).mockReturnValue({ rows: 40, columns: 80 });
+    vi.mocked(findElementAtMouseEvent).mockReturnValue(null);
+  });
+
+  function mountAndGetHandler(): (event: MouseEvent) => void {
+    render(
+      <CompletionCategoryMouseController
+        containerRef={ref(containerNode)}
+        categoryRefs={ref(categoryNodes)}
+        categories={categories}
+        onSelectCategory={onSelectCategory}
+      />,
+    );
+    const call = vi.mocked(useMouseEvents).mock.calls.at(-1)!;
+    expect(call[1]).toMatchObject({ isActive: true, tracking: 'button' });
+    return call[0];
+  }
+
+  it('selects the exact category under a left click', () => {
+    vi.mocked(findElementAtMouseEvent).mockReturnValue(2);
+    const handler = mountAndGetHandler();
+
+    handler(makeEvent({ name: 'left-press', col: 19, row: 5 }));
+
+    expect(onSelectCategory).toHaveBeenCalledWith('session');
+  });
+
+  it('ignores clicks outside category bounds', () => {
+    const handler = mountAndGetHandler();
+
+    handler(makeEvent({ name: 'left-press', col: 18, row: 5 }));
+    handler(makeEvent({ name: 'left-press', col: 9, row: 5 }));
+    handler(makeEvent({ name: 'left-press', col: 19, row: 6 }));
+
+    expect(onSelectCategory).not.toHaveBeenCalled();
+  });
+
+  it('ignores non-press mouse events', () => {
+    vi.mocked(findElementAtMouseEvent).mockReturnValue(2);
+    const handler = mountAndGetHandler();
+
+    handler(makeEvent({ name: 'move', col: 19, row: 5 }));
+    handler(makeEvent({ name: 'left-release', col: 19, row: 5 }));
+
+    expect(onSelectCategory).not.toHaveBeenCalled();
+  });
+
+  it('uses terminal height when the composited frame overflows', () => {
+    vi.mocked(findElementAtMouseEvent).mockReturnValue(2);
+    const handler = mountAndGetHandler();
+
+    handler(makeEvent({ name: 'left-press', col: 19, row: 5 }));
+
+    expect(findElementAtMouseEvent).toHaveBeenCalledWith(
+      containerNode,
+      categoryNodes,
+      expect.objectContaining({ col: 19, row: 5 }),
+      40,
+      'rect',
+    );
+    expect(onSelectCategory).toHaveBeenCalledWith('session');
+  });
+});

packages/cli/src/ui/components/CompletionCategoryMouseController.tsx

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2025 Qwen
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { type MutableRefObject, useCallback } from 'react';
+import { type DOMElement } from 'ink';
+import { useTerminalSize } from '../hooks/useTerminalSize.js';
+import { useMouseEvents } from '../hooks/useMouseEvents.js';
+import { type MouseEvent } from '../utils/mouse.js';
+import { findElementAtMouseEvent } from '../utils/mouse-hit.js';
+import { type SuggestionCategory } from '../utils/suggestions.js';
+
+type CompletionCategory = SuggestionCategory | 'all';
+
+interface CompletionCategoryMouseControllerProps {
+  containerRef: MutableRefObject<DOMElement | null>;
+  categoryRefs: MutableRefObject<Array<DOMElement | null>>;
+  categories: readonly CompletionCategory[];
+  onSelectCategory: (category: CompletionCategory) => void;
+}
+
+/**
+ * Headless click layer for the completion category tabs.
+ *
+ * Coordinates assume the alternate-screen virtual viewport used by the owning
+ * suggestion UI. Ink bottom-pins an overflowing frame, so terminal rows must
+ * pass through `layoutRowForEvent` before they are compared with layout-space
+ * tab rectangles. Inline mode is intentionally unsupported; mount this only
+ * behind the owning surface's `mouseEnabled` gate.
+ */
+export function CompletionCategoryMouseController({
+  containerRef,
+  categoryRefs,
+  categories,
+  onSelectCategory,
+}: CompletionCategoryMouseControllerProps): null {
+  const { rows: terminalHeight } = useTerminalSize();
+
+  const handleMouse = useCallback(
+    (event: MouseEvent) => {
+      if (event.name !== 'left-press') return;
+
+      const index = findElementAtMouseEvent(
+        containerRef.current,
+        categoryRefs.current,
+        event,
+        terminalHeight,
+        'rect',
+      );
+      if (index !== null && index < categories.length) {
+        onSelectCategory(categories[index]);
+      }
+    },
+    [containerRef, categoryRefs, categories, onSelectCategory, terminalHeight],
+  );
+
+  useMouseEvents(handleMouse, { isActive: true, tracking: 'button' });
+
+  return null;
+}