Skip to content

feat: highlight @file tokens in input with accent color #6

Description

@ezynda3

Feature Description

@filename references typed in the input textarea should be visually distinguished from surrounding text using a theme accent color (e.g. theme.Accent or theme.Secondary). Currently, @file tokens look identical to the rest of the prompt text, making it easy to miss that a file attachment is present.

The highlighting should apply to the full @path/to/file token (including the @ prefix) as it appears in the input area, so users get immediate visual confirmation that their file reference was recognized.

Motivation / Use Case

When composing prompts with @file references mixed into natural language, it is difficult to tell at a glance which parts of the input are file attachments vs. regular text. This is especially problematic when:

  • Attaching multiple files (e.g. @main.go @utils.go refactor these)
  • Using long paths that blend into the surrounding text
  • Reviewing the prompt before submitting to confirm the right files are referenced

Image attachments already have a dedicated styled indicator ([N image(s) attached] in theme.Secondary), so @file tokens are the only attachment type with no visual distinction. Adding accent-colored highlighting would bring consistency and make the input feel more polished.

Who benefits: Any user who attaches files via the @ syntax in the TUI input.

Proposed Implementation

  1. Token-aware rendering in the textarea view — In InputComponent.View() (or via a custom textarea Render override), scan the current textarea value for tokens matching the existing fileTokenPattern regex from fileutil/processor.go and wrap matched spans with a lipgloss.NewStyle().Foreground(theme.Accent) style.

  2. Use the existing theme colortheme.Accent (derived from the active color scheme) is a good default. It already conveys "notable UI element" throughout the TUI (durations, badges, tree-selector highlights) and adapts to light/dark terminals via AdaptiveColor.

  3. Edge cases to consider:

    • Tokens inside quotes (@"path with spaces/file.txt") should also be highlighted.
    • Partial tokens while typing (before autocomplete selection) could use a dimmer color (theme.Muted) to indicate the reference is not yet complete.
    • Multi-line inputs where @ appears mid-line.
    • Ensure ANSI escape codes from styling do not interfere with cursor positioning in the textarea.
  4. Alternative (simpler) approach — If inline textarea highlighting is too complex due to cursor/ANSI interactions, a secondary indicator line (similar to the image attachment indicator) could list recognized file attachments below the input box:

    [@main.go, @utils.go attached]
    

    styled with theme.Accent.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request
    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions