A full-bleed accent banner component that indicates when a chat session is running in Guide Mode, displaying a compass icon, label, and optional help tooltip. ## Key Components ### `GuideModeBanner` The primary exported component. Renders a fixed-height (`h-8`) yellow accent strip intended to appear below a chat header. | Prop | Type | Default | Description | |------|------|---------|-------------| | `label` | `React.ReactNode` | `'Guide Mode Chat'` | Banner label text (rendered uppercase via `text-h5` style) | | `tooltip` | `React.ReactNode \| null` | Default explanation string | Help icon tooltip copy; pass `null` to hide the help icon entirely | | `className` | `string` | — | Additional CSS classes merged via `cn()` | **Visual structure:** - **Leading:** `CompassIcon` (16px) - **Center:** Truncated label paragraph - **Trailing:** `QuestionCircleIcon` button with a `TooltipProvider` (hidden when `tooltip` is `null`) ## Usage Example ```typescript // Default — shows all three elements with built-in copy // Custom label only // Hide the help icon entirely // Fully custom ``` > **Note:** This component is a Client Component (`'use client'`). It maps to Figma node `7532:328222` and uses ODS design tokens (`bg-ods-accent`, `text-ods-text-on-accent`) for theming. The tooltip uses `delayDuration={0}` for immediate display.