feat(json-editor): add reusable JSON code editor

- introduce a shared themed JSON editor with line numbers, formatting, status feedback, and keyboard editing helpers.
- use the shared editor in model pricing JSON mode so pricing maps get consistent editor behavior.
- localize structured JSON validation messages so parse errors avoid browser-specific English text.

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

@@ -31,7 +31,7 @@ import {
   FormMessage,
 } from '@/components/ui/form'
 import { Switch } from '@/components/ui/switch'
-import { Textarea } from '@/components/ui/textarea'
+import { JsonCodeEditor } from '@/components/json-code-editor'
 import {
   SettingsForm,
   SettingsSwitchContent,
@@ -140,10 +140,9 @@ function ModelJsonTextareaField(props: {
         <FormItem className='flex min-w-0 flex-col gap-2'>
           <FormLabel>{props.label}</FormLabel>
           <FormControl>
-            <Textarea
-              {...field}
-              className='h-56 min-h-56 max-h-56 resize-none overflow-auto [field-sizing:fixed] font-mono text-xs leading-5'
-              spellCheck={false}
+            <JsonCodeEditor
+              value={field.value}
+              onChange={(value) => field.onChange(value)}
             />
           </FormControl>
           <FormDescription className='text-xs leading-5'>