# Generated infographic thumbnails are too large in chat

| | |
|--|--|
| **ID** | `bug_015` |
| **Priority rank** | 2 |
| **Severity** | medium |
| **Category** | ui_polish |
| **Time range** | 325.0s – 333.5s |
| **Key moment** | 330.0s |
| **Affected element** | Generated timeline image |

> ⚠️ **About the red box in `screenshot.png`:** It is an AI-generated guess at the affected
> UI element. **It is correct most of the time but not always** — sometimes the actual
> element is near the box rather than exactly inside it, and occasionally the box lands
> on an unrelated element.
>
> When acting on this bug:
> 1. Read the **narration quote** and **detailed visual walkthrough** below first — they
>    describe what is actually wrong.
> 2. Look at the **full screenshot**, not just inside the red box.
> 3. If you need precise pixel coordinates, consult `omniparser_elements.json` in this
>    folder — it lists every UI element the detector found on this screen, with bounding
>    boxes and confidence. You can search by label or look at elements adjacent to the
>    red box.

## Description

The images of the generated charts displayed in the chat stream are too large, taking up excessive vertical space. The user suggests they should be 'very small little thumbnails' to avoid cluttering the chat.

## What the narrator said

> "all this stuff is too big. These need to be very small little thumbnails... These thumbnails are too big, it takes up too much of the chat space."

## Detailed visual walkthrough

The screen displays a chat interface for an application called "Athena v3". The main panel shows a conversation with "John's Athena". The most recent message from the AI reads, "Perfect! Now I'll create a gorgeous visual infographic with diagrams, charts, and illustrated elements." Immediately below this text is a large, wide image of a timeline chart titled "2020 Iran War Timeline".

The narrator begins speaking, stating, "all this stuff is too big. These need to be very small little thumbnails as it generates them boom boom boom boom. I can click them to make them big." As they speak, the cursor moves over the large timeline image. The narrator continues, "These are these thumbnails are too big, it takes up too much of the chat space."

To demonstrate this point, the user scrolls up briefly to show the preceding messages, then scrolls down through the chat history. As the view scrolls, it reveals that the AI has generated several other charts in response to the prompt, including a Venn diagram and a flowchart. Each of these images is rendered at a large size, consuming a significant amount of vertical space and forcing the user to scroll extensively to see the entire sequence of generated content. The clip ends with the chat log scrolled down, showing the stack of large images, visually confirming the narrator's complaint about the inefficient use of space.

## Suggested fix

Render the generated charts as small, fixed-height thumbnails within the chat message. Implement a click-to-enlarge feature (e.g., opening the full-size image in a modal or lightbox) so users can inspect the details without cluttering the main chat view.

## Bounding boxes drawn on `screenshot.png`

- **Generated timeline image** at `[ymin=527, xmin=150, ymax=701, xmax=360]` (normalized 0-1000)

## Files in this folder

- `clip.mp4` — Video clip (325.0s – 333.5s, plus 2s padding on each side)
- `screenshot.png` — Key frame at 330.0s with red bounding box (see note above on accuracy)
- `screenshot_raw.png` — Same frame, no annotations
- `clip_description.md` — The detailed walkthrough above as a standalone file
- `bug.json` — Structured data
- `omniparser_elements.json` — every UI element detected on this screen by the OmniParser YOLOv8 model, with pixel-space bounding boxes and confidence scores. Useful if the red box in `screenshot.png` is on the wrong element — you can pick a different one from this list.
- `motion/` — Additional keyframes showing motion/state-change (if any):
  _(none — this is a static issue)_
