**As** a user
**I want to** preview suggested AI action results before applying them
**so that** I can verify the changes and understand the scope of the AI's input before committing to the update.

**Acceptance criteria**

* Begin of the insertionWhen an AI-Action is triggered from the CKEditor, the AI result popover should be displayed.

* End of the insertion The AI result Begin of the insertionpopoverEnd of the insertion Begin of the deletion paneEnd of the deletion shows the triggered action Begin of the insertionas title and is displayed on the upper right corner underneath the OpenProject toolbar, as shown in the designsEnd of the insertion Begin of the deletion asa titeEnd of the deletion

* The AI result Begin of the insertionpopoverEnd of the insertion Begin of the deletion paneEnd of the deletion must display context information indicating the scope of the input used (e.g., "Selected text" or Begin of the insertion"Work packageEnd of the insertion Begin of the deletion "WholeEnd of the deletion description").

* Begin of the deletion The pane must include a "Replace" button to apply the suggested changes.

* End of the deletion A "Generating..." information must be visible while the LLM is processing the request.

* Begin of the insertionWhen generating was successful, the popover must show:

*  A "Replace" button to apply the suggested changes.

* When the context is "selected text" only the selected text should be replaced

* When the context is the whole description, all text in the editor should be replaced

* End of the insertion A Begin of the insertion"Discard" button that closes the AI result popover without any changes applied

* A "Copy" button that copies the generated text into the users clipboard

* AEnd of the insertion "Cancel" button must be available to stop the operation while the LLM is processing.

* ~~The AI result pane must function as a draggable overlay, allowing the user to move it around the screen to view underlying OpenProject UI elements.~~

* The updates of the Begin of the insertionLLMEnd of the insertion Begin of the deletion LMEnd of the deletion generation should be shown into the result pane as they are developed.

* If the LLM returns an error, the pane must display a clear error message informing the user that the operation failed.

* The Result Begin of the insertionpopoverEnd of the insertion Begin of the deletion PaneEnd of the deletion needs to deal with canceled streams when e.g. guardrails block further generation. As a result of a canceled stream, the already displayed content needs to be removed and a error message shown. Begin of the insertion

<br>End of the insertion


<br>

Begin of the insertion**Technical details**End of the insertion Begin of the deletion <br>End of the deletion

Begin of the insertion* The AI Result popover should be build on top of the popover. See:

<br>

https://qa.openproject-edge.com/lookbook/inspect/primer/beta/popover/playground


End of the insertion **Out of scope**

* Diff view

* Resizing and moving result pane freely

* Animated loading icon

* Global toolbar icon


<br>

**Design positioning**

**<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/924224/content">**

**Design generating**

**<img class="image_resized op-uc-image op-uc-image_inline" style="width:477px;" src="/api/v3/attachments/924222/content">**

<br>

**Design done**

**<img class="image_resized op-uc-image op-uc-image_inline" style="width:488px;" src="/api/v3/attachments/924223/content">**

**Design errors**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><figure class="image image_resized op-uc-figure" style="width:509px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/924225/content"></div></figure></td><td class="op-uc-table--cell"><figure class="image image_resized op-uc-figure" style="width:428px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/924226/content"></div></figure></td></tr></tbody></table></figure>

**Design text selected**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:436px;" src="/api/v3/attachments/924227/content">