feat(vscode): support bidirectional prompt input

[mjnaderi]

Issue

Using right-to-left languages in the prompt input is difficult because the input does not resolve text direction from the prompt content. Right-to-left prompts that include left-to-right content such as file paths, code, URLs, or mentions can appear in the wrong visual/logical order, making them hard to read, navigate, and edit.

Context

Add bidirectional text support to the VS Code prompt input.

The prompt can contain right-to-left languages mixed with left-to-right content such as file paths, code, URLs, and file mentions. The prompt input also has two visual layers: the real textarea and the overlay that renders highlighted mentions / ghost text. Both layers need to resolve direction the same way so mixed-direction prompts render and edit correctly.

Implementation

The textarea and highlight overlay now use dir="auto" so the browser resolves the base direction from the prompt text and applies bidirectional text layout consistently across both layers.

This also required updating file-mention arrow navigation. Previously handleArrowKey assumed ArrowRight always moved forward through the textarea value and ArrowLeft always moved backward. That was correct before bidirectional prompt support, but right-to-left text reverses the visual meaning of horizontal arrow keys. The mention-skip logic now checks the textarea’s resolved direction before deciding which side of an atomic mention block to jump to.

Screenshots

before	after

How to Test

Manual/local verification

• Ran focused unit tests for bidirectional prompt support and mention arrow navigation.
• Ran lint on the touched hook and test files.
• Manually built the extension and exercised the prompt input with right-to-left, left-to-right, and mixed-direction content, both with and without file mentions; confirmed rendering, editing, and mention navigation work correctly.
• Pushed branch and the pre-push typecheck hook completed successfully.

Reviewer test steps

1. Open the Kilo VS Code extension webview.
2. Type a prompt in a right-to-left language, optionally mixed with file paths or code.
3. Confirm the prompt text direction resolves naturally.
4. Add a file mention in the prompt.
5. Move the caret across the mention with left/right arrow keys.
6. Confirm the caret skips over the mention block in the expected visual direction.

Blocked checks and substitute verification

• None.

Checklist

• Issue linked above, or exception explained
• Tests/verification described
• Screenshots/video included for visual changes, or marked N/A
• Changeset considered for user-facing changes
• I personally reviewed the diff and can explain the changes, including any AI-assisted work.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (5 files)

• .changeset/add-prompt-input-bidirectional-support.md
• packages/kilo-vscode/tests/unit/prompt-input-bidirectional.test.ts
• packages/kilo-vscode/tests/unit/use-file-mention.test.ts
• packages/kilo-vscode/webview-ui/src/components/chat/PromptInput.tsx
• packages/kilo-vscode/webview-ui/src/hooks/useFileMention.ts

---

_{Reviewed by claude-sonnet-5-20260630 · Input: 22 · Output: 8.5K · Cached: 610.2K}

_{Review guidance: REVIEW.md from base branch main}

[marius-kilocode]

Thanks @mjnaderi , works great!