fix(model-pricing): detect visual pricing draft changes on save

- expose a draft commit handle from the model pricing editor panel before saving.
- commit the open visual editor into the parent form before page-level save runs.
- support both desktop side editor and mobile sheet save paths.

web/default/src/features/system-settings/models/model-pricing-sheet.tsx

@@ -16,7 +16,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useEffect, useMemo, useState } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
 import * as z from 'zod'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -130,6 +137,10 @@ type ModelPricingEditorPanelProps = Omit<
   className?: string
 }
 
+export type ModelPricingEditorPanelHandle = {
+  commitDraft: () => Promise<ModelRatioData | null>
+}
+
 type PreviewRow = {
   key: string
   label: string
@@ -377,14 +388,13 @@ function buildPreviewRows(
   ]
 }
 
-export function ModelPricingSheet({
+export const ModelPricingSheet = forwardRef<
-  open,
+  ModelPricingEditorPanelHandle,
-  onOpenChange,
+  ModelPricingSheetProps
-  onSave,
+>(function ModelPricingSheet(
-  onCancel,
+  { open, onOpenChange, onSave, onCancel, editData, selectedTargetCount = 0 },
-  editData,
+  ref
-  selectedTargetCount = 0,
+) {
-}: ModelPricingSheetProps) {
   const { t } = useTranslation()
   const title = editData ? t('Edit model pricing') : t('Add model pricing')
   const description = editData?.name || t('New model')
@@ -400,6 +410,7 @@ export function ModelPricingSheet({
           <SheetDescription>{description}</SheetDescription>
         </SheetHeader>
         <ModelPricingEditorPanel
+          ref={ref}
           onSave={onSave}
           editData={editData}
           selectedTargetCount={selectedTargetCount}
@@ -412,15 +423,15 @@ export function ModelPricingSheet({
       </SheetContent>
     </Sheet>
   )
-}
+})
 
-export function ModelPricingEditorPanel({
+export const ModelPricingEditorPanel = forwardRef<
-  onSave,
+  ModelPricingEditorPanelHandle,
-  editData,
+  ModelPricingEditorPanelProps
-  selectedTargetCount = 0,
+>(function ModelPricingEditorPanel(
-  onCancel,
+  { onSave, editData, selectedTargetCount = 0, onCancel, className },
-  className,
+  ref
-}: ModelPricingEditorPanelProps) {
+) {
   const { t } = useTranslation()
   const [pricingMode, setPricingMode] = useState<PricingMode>('per-token')
   const [promptPrice, setPromptPrice] = useState('')
@@ -687,7 +698,7 @@ export function ModelPricingEditorPanel({
     return nextWarnings
   }, [editData, laneEnabled, lanePrices, pricingMode, promptPrice, t])
 
-  const handleSubmit = (values: ModelPricingFormValues) => {
+  const validatePricingValues = useCallback(() => {
     if (
       pricingMode === 'per-token' &&
       toNumberOrNull(promptPrice) === null &&
@@ -698,7 +709,7 @@ export function ModelPricingEditorPanel({
       form.setError('ratio', {
         message: t('Input price is required before saving dependent prices.'),
       })
-      return
+      return false
     }
 
     if (
@@ -709,27 +720,53 @@ export function ModelPricingEditorPanel({
       form.setError('audioRatio', {
         message: t('Audio output price requires an audio input price.'),
       })
-      return
+      return false
     }
 
-    const data: ModelRatioData = {
+    return true
-      name: values.name.trim(),
+  }, [form, laneEnabled, lanePrices, pricingMode, promptPrice, t])
-      billingMode: pricingMode,
-      price: values.price || '',
-      ratio: values.ratio || '',
-      cacheRatio: values.cacheRatio || '',
-      createCacheRatio: values.createCacheRatio || '',
-      completionRatio: values.completionRatio || '',
-      imageRatio: values.imageRatio || '',
-      audioRatio: values.audioRatio || '',
-      audioCompletionRatio: values.audioCompletionRatio || '',
-    }
 
-    if (pricingMode === 'tiered_expr') {
+  const buildSubmitData = useCallback(
-      data.billingExpr = billingExpr
+    (values: ModelPricingFormValues) => {
-      data.requestRuleExpr = requestRuleExpr
+      const data: ModelRatioData = {
-    }
+        name: values.name.trim(),
+        billingMode: pricingMode,
+        price: values.price || '',
+        ratio: values.ratio || '',
+        cacheRatio: values.cacheRatio || '',
+        createCacheRatio: values.createCacheRatio || '',
+        completionRatio: values.completionRatio || '',
+        imageRatio: values.imageRatio || '',
+        audioRatio: values.audioRatio || '',
+        audioCompletionRatio: values.audioCompletionRatio || '',
+      }
 
+      if (pricingMode === 'tiered_expr') {
+        data.billingExpr = billingExpr
+        data.requestRuleExpr = requestRuleExpr
+      }
+
+      return data
+    },
+    [billingExpr, pricingMode, requestRuleExpr]
+  )
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      commitDraft: async () => {
+        const isValid = await form.trigger()
+        if (!isValid || !validatePricingValues()) return null
+        return buildSubmitData(form.getValues())
+      },
+    }),
+    [form, validatePricingValues, buildSubmitData]
+  )
+
+  const handleSubmit = (values: ModelPricingFormValues) => {
+    if (!validatePricingValues()) return
+
+    const data = buildSubmitData(values)
     onSave(data)
     form.reset()
     onCancel?.()
@@ -980,7 +1017,7 @@ export function ModelPricingEditorPanel({
       </Form>
     </div>
   )
-}
+})
 
 function PriceInput(props: {
   value: string

web/default/src/features/system-settings/models/model-ratio-form.tsx

@@ -16,7 +16,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { memo, useCallback, useState } from 'react'
+import { memo, useCallback, useRef, useState } from 'react'
 import { type UseFormReturn } from 'react-hook-form'
 import { Code2, Eye } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -38,7 +38,10 @@ import {
   SettingsSwitchItem,
 } from '../components/settings-form-layout'
 import { SettingsPageActionsPortal } from '../components/settings-page-context'
-import { ModelRatioVisualEditor } from './model-ratio-visual-editor'
+import {
+  ModelRatioVisualEditor,
+  type ModelRatioVisualEditorHandle,
+} from './model-ratio-visual-editor'
 
 type ModelFormValues = {
   ModelPrice: string
@@ -71,6 +74,7 @@ export const ModelRatioForm = memo(function ModelRatioForm({
 }: ModelRatioFormProps) {
   const { t } = useTranslation()
   const [editMode, setEditMode] = useState<'visual' | 'json'>('visual')
+  const visualEditorRef = useRef<ModelRatioVisualEditorHandle>(null)
 
   const handleFieldChange = useCallback(
     (field: keyof ModelFormValues, value: string) => {
@@ -86,6 +90,15 @@ export const ModelRatioForm = memo(function ModelRatioForm({
     setEditMode((prev) => (prev === 'visual' ? 'json' : 'visual'))
   }, [])
 
+  const handleSave = useCallback(async () => {
+    if (editMode === 'visual') {
+      const committed = await visualEditorRef.current?.commitOpenEditor()
+      if (committed === false) return
+    }
+
+    await form.handleSubmit(onSave)()
+  }, [editMode, form, onSave])
+
   return (
     <div className='space-y-6'>
       <div className='flex justify-end'>
@@ -118,7 +131,7 @@ export const ModelRatioForm = memo(function ModelRatioForm({
           <Button
             type='button'
             size='sm'
-            onClick={form.handleSubmit(onSave)}
+            onClick={handleSave}
             disabled={isSaving}
           >
             {isSaving ? t('Saving...') : t('Save model prices')}
@@ -127,6 +140,7 @@ export const ModelRatioForm = memo(function ModelRatioForm({
         {editMode === 'visual' ? (
           <div className='space-y-6'>
             <ModelRatioVisualEditor
+              ref={visualEditorRef}
               modelPrice={form.watch('ModelPrice')}
               modelRatio={form.watch('ModelRatio')}
               cacheRatio={form.watch('CacheRatio')}