# Replace Native Persona Dropdown with Custom Styled Component

| | |
|--|--|
| **ID** | `bug_003` |
| **Priority rank** | 6 |
| **Severity** | low |
| **Category** | ui_polish |
| **Time range** | 103.0s – 116.5s |
| **Key moment** | 104.5s |
| **Affected element** | Persona selection dropdown |

> ⚠️ **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 'John's Athena' persona selector in the header is a native browser dropdown, which is inconsistent with the application's overall dark theme and custom styling. It looks 'ugly' and out of place. This should be replaced with a custom-styled dropdown component that matches the rest of the UI.

## What the narrator said

> "This right here, this should not be a normal drop down. It looks ugly. Make this a customized specialized drop down that looks like the rest of this."

## Detailed visual walkthrough

The screen displays a dark-themed application titled "Athena v3". The main interface is a chat view, with a list of conversations in a left sidebar and the active chat, "John's Athena," occupying the central panel. The header contains the persona selector, a native browser dropdown showing "John's Athena," alongside several custom-styled buttons like "Hide Brain Routing" and "Refresh quotes."

The user's primary interaction in this clip is with the chat log's display options. The narrator says, "and all, collapse all," as the cursor moves to the "Collapse all" button at the top right of the chat panel and clicks it. This action collapses all the detailed, multi-line entries in the chat history into single-line summaries. The narrator then says, "Okay, expand all, what does that do?" and clicks the same button, which is now labeled "Expand all." The chat entries immediately expand back to their detailed view, revealing code and JSON-like structures. The narrator expresses approval, saying, "Okay, expands them all. Okay, cool. Okay, okay. I do like that. That's kind of cool."

While the user explores the expand/collapse feature, the core issue being demonstrated is the visual inconsistency of the persona selector. The native dropdown for "John's Athena" in the header starkly contrasts with the application's custom dark theme and styled components. As the narrator noted, "This right here, this should not be a normal drop down. It looks ugly." The desired fix is to replace this standard HTML select element with a custom-styled dropdown component that matches the aesthetic of the rest of the application. The clip ends with the chat log fully expanded and the out-of-place native dropdown still visible in the header.

## Suggested fix

Replace the native `<select>` element with a custom dropdown component built with divs and styled with CSS to match the application's design system. Ensure it is fully accessible.

## Bounding boxes drawn on `screenshot.png`

- **Persona selection dropdown** at `[ymin=217, xmin=56, ymax=250, xmax=173]` (normalized 0-1000)

## Files in this folder

- `clip.mp4` — Video clip (103.0s – 116.5s, plus 2s padding on each side)
- `screenshot.png` — Key frame at 104.5s 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):
  - `motion/01_106.0s.png` — frame at 106.0s: Native dropdown menu opens, showing the inconsistent styling.
