fix(core): should use sonnet 4 for make it real (#13106)

#### PR Dependency Tree


* **PR #13106** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Improved code highlighting performance and resource management for
AI-generated code artifacts, resulting in smoother user experience and
more efficient updates.
* **Chores**
* Updated underlying AI model for "Make it real" features, which may
affect AI-generated outputs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/components/ai-tools/code-artifact.ts

@@ -103,6 +103,8 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
   override connectedCallback() {
     super.connectedCallback();
 
+    this.highlighter.mounted();
+
     // recompute highlight when code / language changes
     this.disposables.add(
       effect(() => {
@@ -111,17 +113,25 @@ export class CodeHighlighter extends SignalWatcher(WithDisposable(LitElement)) {
     );
   }
 
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.highlighter.unmounted();
+  }
+
   private _updateHighlightTokens() {
     let cancelled = false;
     const language = this.language;
     const highlighter = this.highlighter.highlighter$.value;
+
     if (!highlighter) return;
 
     const updateTokens = () => {
       if (cancelled) return;
-      this.highlightTokens.value = highlighter.codeToTokensBase(this.code, {
-        lang: language,
-        theme: this.highlighter.themeKey,
+      requestIdleCallback(() => {
+        this.highlightTokens.value = highlighter.codeToTokensBase(this.code, {
+          lang: language,
+          theme: this.highlighter.themeKey,
+        });
       });
     };