Add GPT-4.1, o-series, and computer-use-preview models

[jamesmcroft]

This pull request introduces significant changes to the token cost calculation logic, the structure of the model data, and the user interface for model selection and calculation explanations. The updates ensure better scalability, improved user experience, and enhanced clarity in cost calculations. Below are the most important changes grouped by theme:

Cost Calculation Updates:

• Updated the cost calculation logic to use "cost per million tokens" instead of "cost per thousand tokens" in both src/stores/CalcStore.js and src/components/calculator/CalculationExplanation.jsx. This change affects how the total cost is calculated and displayed. [1] [2] [3]

Model Data Restructuring:

• Restructured the models data in src/stores/ModelStore.js to group models into categories (e.g., "GPT-4.1", "o-series") with nested items. This allows for better organization and scalability of model configurations. [1] [2] [3]
• Updated the ModelSelector component to support the new grouped model structure. Added ListSubheader elements for grouping models and adjusted the logic to handle nested model data when selecting a model. [1] [2]

UI Improvements:

• Added a new comment field for models in src/stores/ModelStore.js, which is displayed in the CalculationExplanation component if present. This provides additional context or important notes about specific models. [1] [2]

[Copilot]

Pull Request Overview

This pull request introduces new multimodal models and updates the cost calculation logic from cost per thousand tokens to cost per million tokens while restructuring model data and improving the UI for model selection and explanation.

• Updated the cost calculation logic in CalcStore.js to use cost per million tokens.
• Restructured ModelStore.js to group models into categories and added an optional comment field for additional model context.
• Modified ModelSelector.jsx and CalculationExplanation.jsx to support grouped models and display extra model information.

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/stores/ModelStore.js	Updated model grouping and cost field naming for scalability
src/stores/CalcStore.js	Adjusted cost calculation logic to use per million tokens
src/components/calculator/ModelSelector.jsx	Refactored model selection to support nested/grouped model data
src/components/calculator/CalculationExplanation.jsx	Updated displayed cost info and conditionally rendered model comment
README.md	Revised description to include the new multimodal models

Comments suppressed due to low confidence (1)

src/components/calculator/ModelSelector.jsx:21

• [nitpick] The selection logic using flatMap with find and filter might lead to ambiguity if models across groups share the same name. Consider refactoring this logic (e.g., using a nested loop or reduce) to ensure a clear and deterministic selection and to better handle duplicate names.

const selectedModel = models.flatMap((modelGroup) => modelGroup.items.find((m) => m.name === model)).filter(Boolean)[0];