Responsive top-navigation bar for the chat panel, rendering the correct header layout across list, active-conversation, archived-conversation, and compose views — with adaptive mobile/desktop breakpoints and inline search support. ## Key Components | Export | Type | Description | |---|---|---| | `ChatPanelHeader` | Component | Main header bar with back navigation, title, avatar, action buttons, and close | | `ChatPanelHeaderProps` | Interface | Full prop surface controlling layout, actions, search, and avatar | ## Usage Example ```typescript // List view (no back, with search + archive entry) // Active conversation view // Archived conversation (read-only) // Embedded/compact mode (skips mobile full-screen layout) ``` ## Layout Behavior ```mermaid graph TD A[ChatPanelHeader] --> B{compact?} B -->|false| C[ChatPanelHeaderMobile on small screens] B -->|false| D[Compact bar on md+] B -->|true| E[Compact bar at ALL widths] D --> F{showBack?} F -->|true| G[Back chevron + title + ellipsis menu] F -->|false| H[Static title + search + archive clock] ``` **Right-hand action slots (desktop bar):** | Condition | Rendered control | |---|---| | `isArchivedView && onRestore` | Refresh/unarchive button | | `showBack && !isArchivedView` | ⋯ dropdown (rename / archive) | | `!showBack && onToggleSearch` | Search toggle (hidden when inline search open) | | `!showBack && onOpenArchive` | Clock/archive entry button | | Always | × close button | ## Source [`chat-panel-header.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/chat-panel-header.tsx)