Function ModelPicker

apps/start/src/components/chat/model-picker.tsx:19–70

()

 * different agent name on the next render.
 */
export function ModelPicker() {
  const { agentName, setAgent, models } = useChatState();

  const grouped = models.reduce<Record<string, ChatModelOption[]>>(
    (acc, m) => {
      (acc[m.group] ??= []).push(m);
      return acc;
    },
    {},
  );

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          className="h-7 px-2 text-xs gap-1 text-muted-foreground"
          aria-label="Select model"
          title="Select model"
        >
          <span className="truncate max-w-[140px]">
            {getModelLabel(agentName)}
          </span>
          <ChevronDownIcon className="size-3" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56">
        {Object.entries(grouped).map(([group, items], idx) => (
          <div key={group}>
            {idx > 0 && <DropdownMenuSeparator />}
            <DropdownMenuLabel className="text-[11px] uppercase tracking-wide text-muted-foreground">
              {group}
            </DropdownMenuLabel>
            {items.map((m) => (
              <DropdownMenuItem
                key={m.id}
                onSelect={() => setAgent(m.id)}
                className="flex items-center justify-between gap-2"
              >
                <span className="truncate">{m.label}</span>
                {agentName === m.id && (
                  <CheckIcon className="size-3 shrink-0 text-foreground" />
                )}
              </DropdownMenuItem>
            ))}
          </div>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}