---
title: Prompt Reference Thumbnail Plan
description: Display real image thumbnails for @ references in the canvas prompt input
---

# Prompt Reference Thumbnail Plan

## Problem

A plain textarea can display only text labels for `@` references. The canvas prompt panel needs real image thumbnails while preserving ordinary text editing, IME input, keyboard navigation, deletion, and the existing send contract.

## Solution

Introduce `CanvasPromptChipInput`, a focused `contentEditable` input that renders text and atomic reference chips. Keep the external value and callbacks compatible with the existing prompt panel so model invocation and connected-resource numbering do not change.

Implementation requirements:

- Reuse the existing composer approach for selection restoration, composition events, paste, and keyboard handling.
- Treat each reference chip as a non-editable unit and remove it with Backspace or Delete.
- Render image references with object URLs and accessible labels; keep text, video, and audio references compact.
- Serialize the editable DOM back to the current plain-text reference format before sending.
- Replace only the prompt panel input and keep the existing model selectors, prompt library, resource resolution, and generation requests unchanged.

Manual verification should cover Chinese IME, ordinary slash text, multiline paste, adding and deleting multiple references, thumbnail rendering, selection movement, sending, and restoring the draft.
