ModelGuide

Agent chat · src/components/ModelGuide/ModelGuide.tsx

The full comparison behind the ranking: what each model was asked, what it wrote, and how it scored.

Two modes. Simple gives the order and a reason. Advanced shows the four dimension scores, the weights, the arithmetic and the confidence interval - everything needed to disagree with the ranking. A ranking that cannot be disagreed with is marketing, which is why the advanced view is a real view and not a footnote.

Every pick carries one real run: the prompt, the whole output in its own scrolling region, and a marker when the sample is illustrative rather than a verbatim capture. The output box is focusable so a keyboard can scroll it.

A task with no picks says "Not ranked yet" and when it will be, rather than rendering an empty list that looks like a loading failure.

Import

import { ModelGuide } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
`professions`	`GuideProfession[]`
`limit`	`number`
`locale`	`string`
`currency`	`string`
`rates`	`Record<string, number>`
`currencyByLang`	`Record<string, string>`
`source`	`{ name?: string; edition?: string; note?: string }`
`weights`	`GuideWeights`
`mode`	`'simple' \| 'advanced'`	`advanced` shows the scores, the weights and the arithmetic.
`defaultMode`	`'simple' \| 'advanced'`
`profession`	`string`	Controlled, so a ModelPicker can open the guide on its own task.
`task`	`string`
`defaultProfession`	`string`
`defaultTask`	`string`
`title`	`React.ReactNode`
`lede`	`React.ReactNode`
`method`	`React.ReactNode`	How the testing works. Opened by default in advanced mode.
`modeLabel`	`string`
`simpleLabel`	`React.ReactNode`
`advancedLabel`	`React.ReactNode`
`professionLabel`	`string`
`taskLabel`	`string`
`perLabel`	`React.ReactNode`
`topLabel`	`React.ReactNode`
`promptLabel`	`React.ReactNode`
`outputLabel`	`string`
`illustrativeLabel`	`React.ReactNode`
`calcLabel`	`React.ReactNode`
`noteLabel`	`string`
`useLabel`	`React.ReactNode`
`runLabel`	`React.ReactNode`
`methodLabel`	`React.ReactNode`
`emptyTitle`	`React.ReactNode`
`emptyText`	`React.ReactNode`
`className`	`string`
`onTaskChange`	`(taskId: string \| null, professionId: string) => void`
`onModeChange`	`(mode: 'simple' \| 'advanced') => void`
`onUse`	`(pick: GuidePick, context: { profession: GuideProfession; task: GuideTask }) => void`

Exported types

GuidePick, GuideTask, GuideProfession