feat: enhance JsonCodeEditor with autoFocus support

frontend/features/chat/components/sections/chat-model-config.tsx

@@ -906,6 +906,7 @@ export function ChatModelConfig({
         <JsonCodeEditor
           value={optionsDraft}
           onChange={handleOptionsJSONChange}
+          autoFocus
           height="min(52dvh, 420px)"
           className="min-h-56"
           actions={
@@ -1175,13 +1176,13 @@ export function ChatModelConfig({
             }}
           >
             <div className="min-h-0 flex-1 overflow-y-auto sm:pr-1">
-              <div className="space-y-3 md:hidden">
-                {mobileView === "json" ? renderOptionsEditor() : renderOptionsVisualFields()}
-              </div>
-
-              <div className="hidden min-w-0 gap-4 md:grid md:grid-cols-[minmax(0,430px)_minmax(300px,1fr)] md:gap-5">
-                {renderOptionsEditor()}
-                {renderOptionsVisualFields()}
+              <div className="grid min-w-0 gap-4 md:grid-cols-[minmax(0,430px)_minmax(300px,1fr)] md:gap-5">
+                <div className={cn(mobileView === "json" ? "block" : "hidden", "md:block")}>
+                  {renderOptionsEditor()}
+                </div>
+                <div className={cn(mobileView === "visual" ? "block" : "hidden", "md:block")}>
+                  {renderOptionsVisualFields()}
+                </div>
               </div>
             </div>
             <DialogFooter className="shrink-0">

frontend/shared/components/json-code-editor.tsx

@@ -13,6 +13,7 @@ type JsonCodeEditorProps = {
   value: string;
   placeholder?: string;
   disabled?: boolean;
+  autoFocus?: boolean;
   height?: number | string;
   className?: string;
   actions?: React.ReactNode;
@@ -106,6 +107,7 @@ export function JsonCodeEditor({
   value,
   placeholder,
   disabled = false,
+  autoFocus = false,
   height = 220,
   className,
   actions,
@@ -117,9 +119,11 @@ export function JsonCodeEditor({
   const editorRef = React.useRef<Monaco.editor.IStandaloneCodeEditor | null>(null);
   const monacoRef = React.useRef<MonacoModule | null>(null);
   const onChangeRef = React.useRef(onChange);
+  const suppressChangeRef = React.useRef(false);
   const mountValueRef = React.useRef(value);
   const mountDisabledRef = React.useRef(disabled);
   const mountThemeRef = React.useRef(resolvedTheme);
+  const mountAutoFocusRef = React.useRef(autoFocus);
   const [loading, setLoading] = React.useState(true);
   const [markerCount, setMarkerCount] = React.useState(0);
 
@@ -139,6 +143,10 @@ export function JsonCodeEditor({
     mountThemeRef.current = resolvedTheme;
   }, [resolvedTheme]);
 
+  React.useEffect(() => {
+    mountAutoFocusRef.current = autoFocus;
+  }, [autoFocus]);
+
   React.useEffect(() => {
     let disposed = false;
     let contentSubscription: Monaco.IDisposable | null = null;
@@ -169,6 +177,7 @@ export function JsonCodeEditor({
         bracketPairColorization: { enabled: true },
         contextmenu: true,
         detectIndentation: false,
+        editContext: false,
         fixedOverflowWidgets: true,
         folding: true,
         fontFamily: "var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
@@ -192,6 +201,7 @@ export function JsonCodeEditor({
 
       editorRef.current = editor;
       contentSubscription = editor.onDidChangeModelContent(() => {
+        if (suppressChangeRef.current) return;
         onChangeRef.current(editor.getValue());
       });
       markerSubscription = monaco.editor.onDidChangeMarkers((uris) => {
@@ -202,6 +212,14 @@ export function JsonCodeEditor({
         setMarkerCount(monaco.editor.getModelMarkers({ resource: model.uri }).length);
       });
       setLoading(false);
+
+      if (mountAutoFocusRef.current) {
+        setTimeout(() => {
+          if (!disposed) {
+            editor.focus();
+          }
+        }, 50);
+      }
     }
 
     void mountEditor();
@@ -219,7 +237,13 @@ export function JsonCodeEditor({
   React.useEffect(() => {
     const editor = editorRef.current;
     if (editor && editor.getValue() !== value) {
+      const hadFocus = editor.hasTextFocus();
+      suppressChangeRef.current = true;
       editor.setValue(value);
+      suppressChangeRef.current = false;
+      if (hadFocus) {
+        editor.focus();
+      }
     }
   }, [value]);