Model mode menu

import { ModelModeMenu, SAGE_MODES, readSageMode, writeSageMode } from "@/ui";

The model mode menu is the pill next to the send button on the home page and in the session composer. It opens a "Choose your mode" list built on the dropdown menu. Each mode has an icon, a name, a one-line description and an info icon with more detail on hover.

It is used in three places: the harness home page, the older home page and the session composer. Use it only where someone is about to send a prompt to Sage.

UsageCopy Anchor Link

Start the state from readSageMode so the choice carries over between the home page and a session. The menu saves the new mode itself when someone picks one, then calls onChange.

const [mode, setMode] = useState(readSageMode);

<ModelModeMenu value={mode} onChange={setMode} placement="bottom" />

Opening upwardsCopy Anchor Link

Use placement="top" when the menu sits at the bottom of the screen, as in the session composer. The panel aligns to the pill's right edge in both placements, so keep the pill on the right of its row.

<div className="composer-actions">
  <ModelModeMenu value={mode} onChange={setMode} placement="top" />
  <Button variant="primary" icon={ArrowUp} aria-label="Send" />
</div>

DisabledCopy Anchor Link

Disable it whenever the composer cannot send, as the session composer does. The pill drops to 60% opacity and does not open.

<ModelModeMenu value={mode} onChange={setMode} disabled={composerDisabled} />

The modesCopy Anchor Link

The list comes from SAGE_MODES. Each entry is { id, label, beta?, icon, description, tooltip }.

To add or change a mode, edit SAGE_MODES in ModelModeMenu.jsx. Every menu and both helper functions read from it.

PropsCopy Anchor Link

HelpersCopy Anchor Link

LookCopy Anchor Link

AccessibilityCopy Anchor Link

• The pill is a native <button> named "Model mode: Standard" (or the current mode), with aria-haspopup="menu" and aria-expanded.
• Enter, Space or the down arrow opens the list on the first mode. The arrow keys, Home and End move through modes, Enter chooses one, and Escape closes the list. In both cases focus returns to the pill.
• The chosen mode is shown with a drawn check, not aria-checked. Screen readers hear the current mode from the pill's name, not from the list.
• Each mode's accessible name includes the full tooltip text, because the info icon carries it as an aria-label. That makes each option long to listen to.
• The info icons have tabIndex={0}, so Tab moves into them instead of closing the list as it does in every other menu. Clicking an info icon does not choose the mode.

Do and don'tCopy Anchor Link

• Do start state from readSageMode so the choice follows people between pages.
• Do disable the menu together with the composer it sits in.
• Don't call writeSageMode in your onChange. The menu has already saved it.
• Don't use this component for other choices. Its list is fixed to SAGE_MODES. For a general choice under the composer, use the dropdown menu with a Button trigger.