Fixed IME candidate window positioning bug

Summary

Closed, Completed

Understand
Reviewed GitHub issue and related comments.
Understand
Understand
Analyzed terminal UI code for cursor handling.
Understand
Build
Implemented Focusable interface in input components.
Build
Verify
Confirmed correct IME candidate window positioning.
Verify

Analyze GitHub issue(s): https://github.com/badlogic/pi-mono/issues/827

For each issue:

Read the issue in full, including all comments and linked issues/PRs.
For bugs:
- Ignore any root cause analysis in the issue (likely wrong)
- Read all related code files in full (no truncation)
- Trace the code path and identify the actual root cause
- Propose a fix
For feature requests:
- Read all related code files in full (no truncation)
- Propose the most concise implementation approach
- List affected files and changes needed

Do NOT implement unless explicitly asked. Analyze and propose only.

Issue #827: IME Candidate Window Position Bug

Summary: When using an IME (Input Method Editor, e.g., Chinese) to filter menu options (via / command or /model selector), the IME candidate window appears in the wrong position instead of near the input cursor.

Labels: bug State: Open

Analysis

This is a terminal UI issue related to cursor positioning. IME candidate windows position themselves based on the terminal cursor location. Let me examine the relevant TUI code.

Let me check all components that contain an Input and handle keyboard input:

Now I have all the information needed for the analysis.

Root Cause Analysis

Issue: IME candidate window appears in wrong position when filtering menus with Input Method Editor (e.g., Chinese IME).

Root Cause: Components that contain an Input child for text filtering (like ModelSelectorComponent, SessionSelectorComponent, etc.) don't implement the Focusable interface or propagate the focused state to their child Input component.

The TUI framework uses a cursor marker mechanism for IME positioning:

When a component is focused and has focused = true, it should emit CURSOR_MARKER at the cursor position

The Input component in packages/tui/src/components/input.ts does this correctly:

The TUI's extractCursorPosition() finds this marker and positions the hardware cursor there
IME candidate windows position themselves based on the hardware cursor location

The Problem:

When ModelSelectorComponent is focused via ui.setFocus(selector), the TUI sets selector.focused = true
But ModelSelectorComponent doesn't implement Focusable, so this property is just ignored
The child searchInput: Input never gets focused = true
The Input never emits CURSOR_MARKER
The hardware cursor isn't positioned correctly
IME candidate window appears at wrong location

Affected Components

All components in packages/coding-agent/src/modes/interactive/components/ that contain an Input child:

Component	Child Input Field
`model-selector.ts`	`searchInput: Input`
`scoped-models-selector.ts`	`searchInput: Input`
`session-selector.ts`	`SessionList.searchInput: Input`
`extension-input.ts`	`input: Input`
`login-dialog.ts`	`input: Input`
`tree-selector.ts`	`input: Input`

Proposed Fix

Each affected component needs to:

Implement the Focusable interface from @mariozechner/pi-tui
Add a focused property that propagates to the child Input

Example fix for ModelSelectorComponent:

typescript

import { ..., type Focusable } from "@mariozechner/pi-tui";
export class ModelSelectorComponent extends Container implements Focusable {    // ... existing code ...        // Add Focusable implementation    private _focused = false;        get focused(): boolean {         return this._focused;     }        set focused(value: boolean) {        this._focused = value;        this.searchInput.focused = value;  // Propagate to child Input    }}

import { ..., type Focusable } from "@mariozechner/pi-tui";
export class ModelSelectorComponent extends Container implements Focusable {    // ... existing code ...        // Add Focusable implementation    private _focused = false;        get focused(): boolean {         return this._focused;     }        set focused(value: boolean) {        this._focused = value;        this.searchInput.focused = value;  // Propagate to child Input    }}

The same pattern applies to all other affected components. For SessionSelectorComponent, the focus needs to propagate through to SessionList.searchInput.

Files to Modify

packages/coding-agent/src/modes/interactive/components/model-selector.ts
packages/coding-agent/src/modes/interactive/components/scoped-models-selector.ts
packages/coding-agent/src/modes/interactive/components/session-selector.ts
packages/coding-agent/src/modes/interactive/components/extension-input.ts
packages/coding-agent/src/modes/interactive/components/login-dialog.ts
packages/coding-agent/src/modes/interactive/components/tree-selector.ts

implement

Now I'll implement the fix for all affected components. The fix involves implementing the Focusable interface and propagating the focused state to child Input components.

Now let me run the type checker to verify the changes:

All type checks pass. Now let me update the changelog:

Done. Here's a summary of the implementation:

Summary

Fixed issue #827 by implementing the Focusable interface in all components that contain an Input child for text entry. This ensures the hardware cursor is positioned correctly for IME candidate window placement.

Changes Made

Modified files (7):

model-selector.ts - Added Focusable interface, propagates focus to searchInput
scoped-models-selector.ts - Added Focusable interface, propagates focus to searchInput
session-selector.ts - Added Focusable interface to both SessionList (inner class) and SessionSelectorComponent (outer class). Focus propagates: SessionSelectorComponent → SessionList → searchInput
extension-input.ts - Added Focusable interface, propagates focus to input
login-dialog.ts - Added Focusable interface, propagates focus to input
tree-selector.ts - Added Focusable interface to both LabelInput (inner class) and TreeSelectorComponent (outer class). Focus propagates to LabelInput.input when label editing is active
CHANGELOG.md - Added entry under ## [Unreleased]

How it works

The TUI framework uses CURSOR_MARKER for IME cursor positioning. When a component is focused:

TUI calls component.focused = true
The Input component emits CURSOR_MARKER at cursor position only when focused is true
TUI extracts this marker and positions the hardware cursor there
IME candidate windows use the hardware cursor position

Previously, parent components (like ModelSelectorComponent) were focused but didn't propagate the state to their child Input, so no cursor marker was emitted.