perf(ui): defer locale and overlay bundles (#238)

## Summary
- defer locale and overlay loading work away from the first critical
render path
- seed locale state from the bootstrap preload so the first render can
use the preloaded language immediately
- keep bootstrap cache and locale fallback behavior consistent on
subsequent launches

## Testing
- npm run build --workspace @codenomad/ui

.github/workflows/comment-pr-artifacts.yml

@@ -6,6 +6,7 @@ on:
       - opened
       - synchronize
       - reopened
+      - ready_for_review
 
 permissions:
   actions: read
@@ -20,6 +21,7 @@ jobs:
       ALLOWED_ACTORS: ${{ vars.ALLOWED_NON_DEV_PR_ACTORS }}
       ACTOR: ${{ github.actor }}
       BASE_REF: ${{ github.event.pull_request.base.ref }}
+      IS_DRAFT: ${{ github.event.pull_request.draft }}
       PR_NUMBER: ${{ github.event.pull_request.number }}
       HEAD_SHA: ${{ github.event.pull_request.head.sha }}
       RETENTION_DAYS: 7
@@ -42,7 +44,7 @@ jobs:
           fi
 
       - name: Wait for PR build and comment
-        if: ${{ steps.auth.outputs.allowed == 'true' }}
+        if: ${{ steps.auth.outputs.allowed == 'true' && env.IS_DRAFT != 'true' }}
         uses: actions/github-script@v8
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pr-build.yml

@@ -6,6 +6,7 @@ on:
       - opened
       - synchronize
       - reopened
+      - ready_for_review
 
 permissions:
   contents: read
@@ -45,7 +46,7 @@ jobs:
 
   build:
     needs: authorize
-    if: ${{ needs.authorize.outputs.allowed == 'true' }}
+    if: ${{ needs.authorize.outputs.allowed == 'true' && !github.event.pull_request.draft }}
     uses: ./.github/workflows/build-and-upload.yml
     with:
       ref: ${{ github.event.pull_request.head.sha }}

manifest.json

@@ -0,0 +1,6 @@
+{
+  "minServerVersion": "0.12.3",
+  "latestUIVersion": "0.12.3-rtl",
+  "uiPackageURL": "https://github.com/MusiCode1/CodeNomad/releases/download/v0.12.3-rtl/codenomad-ui-rtl.zip",
+  "sha256": "a2ce1aaa04345a2f9ca9d3c3149567867f3a5e477cf6eb269381e6dc1bec7ca2"
+}

packages/tauri-app/Cargo.lock

@@ -473,6 +473,7 @@ dependencies = [
  "tauri",
  "tauri-build",
  "tauri-plugin-dialog",
+ "tauri-plugin-global-shortcut",
  "tauri-plugin-notification",
  "tauri-plugin-opener",
  "thiserror 1.0.69",
@@ -1350,6 +1351,16 @@ dependencies = [
  "version_check",
 ]
 
+[[package]]
+name = "gethostname"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1bd49230192a3797a9a4d6abe9b3eed6f7fa4c8a8a4947977c6f80025f92cbd8"
+dependencies = [
+ "rustix 1.1.4",
+ "windows-link 0.2.1",
+]
+
 [[package]]
 name = "getrandom"
 version = "0.1.16"
@@ -1482,6 +1493,24 @@ version = "0.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0cc23270f6e1808e30a928bdc84dea0b9b4136a8bc82338574f23baf47bbd280"
 
+[[package]]
+name = "global-hotkey"
+version = "0.7.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9247516746aa8e53411a0db9b62b0e24efbcf6a76e0ba73e5a91b512ddabed7"
+dependencies = [
+ "crossbeam-channel",
+ "keyboard-types",
+ "objc2",
+ "objc2-app-kit",
+ "once_cell",
+ "serde",
+ "thiserror 2.0.18",
+ "windows-sys 0.59.0",
+ "x11rb",
+ "xkeysym",
+]
+
 [[package]]
 name = "gobject-sys"
 version = "0.18.0"
@@ -4055,6 +4084,21 @@ dependencies = [
  "url",
 ]
 
+[[package]]
+name = "tauri-plugin-global-shortcut"
+version = "2.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "424af23c7e88d05e4a1a6fc2c7be077912f8c76bd7900fd50aa2b7cbf5a2c405"
+dependencies = [
+ "global-hotkey",
+ "log",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-plugin",
+ "thiserror 2.0.18",
+]
+
 [[package]]
 name = "tauri-plugin-notification"
 version = "2.3.3"
@@ -5735,6 +5779,29 @@ dependencies = [
  "pkg-config",
 ]
 
+[[package]]
+name = "x11rb"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9993aa5be5a26815fe2c3eacfc1fde061fc1a1f094bf1ad2a18bf9c495dd7414"
+dependencies = [
+ "gethostname",
+ "rustix 1.1.4",
+ "x11rb-protocol",
+]
+
+[[package]]
+name = "x11rb-protocol"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ea6fc2961e4ef194dcbfe56bb845534d0dc8098940c7e5c012a258bfec6701bd"
+
+[[package]]
+name = "xkeysym"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9cc00251562a284751c9973bace760d86c0276c471b4be569fe6b068ee97a56"
+
 [[package]]
 name = "yoke"
 version = "0.8.1"

packages/tauri-app/src-tauri/Cargo.toml

@@ -23,6 +23,7 @@ keepawake = "0.6"
 tauri-plugin-dialog = "2"
 dirs = "5"
 tauri-plugin-opener = "2"
+tauri-plugin-global-shortcut = "2"
 url = "2"
 tauri-plugin-notification = "2"
 

packages/tauri-app/src-tauri/gen/schemas/desktop-schema.json

@@ -2378,6 +2378,72 @@
           "const": "dialog:deny-save",
           "markdownDescription": "Denies the save command without any pre-configured scope."
         },
+        {
+          "description": "No features are enabled by default, as we believe\nthe shortcuts can be inherently dangerous and it is\napplication specific if specific shortcuts should be\nregistered or unregistered.\n",
+          "type": "string",
+          "const": "global-shortcut:default",
+          "markdownDescription": "No features are enabled by default, as we believe\nthe shortcuts can be inherently dangerous and it is\napplication specific if specific shortcuts should be\nregistered or unregistered.\n"
+        },
+        {
+          "description": "Enables the is_registered command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-is-registered",
+          "markdownDescription": "Enables the is_registered command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-register",
+          "markdownDescription": "Enables the register command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the register_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-register-all",
+          "markdownDescription": "Enables the register_all command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the unregister command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-unregister",
+          "markdownDescription": "Enables the unregister command without any pre-configured scope."
+        },
+        {
+          "description": "Enables the unregister_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:allow-unregister-all",
+          "markdownDescription": "Enables the unregister_all command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the is_registered command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-is-registered",
+          "markdownDescription": "Denies the is_registered command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the register command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-register",
+          "markdownDescription": "Denies the register command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the register_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-register-all",
+          "markdownDescription": "Denies the register_all command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the unregister command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-unregister",
+          "markdownDescription": "Denies the unregister command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the unregister_all command without any pre-configured scope.",
+          "type": "string",
+          "const": "global-shortcut:deny-unregister-all",
+          "markdownDescription": "Denies the unregister_all command without any pre-configured scope."
+        },
         {
           "description": "This permission set configures which\nnotification features are by default exposed.\n\n#### Granted Permissions\n\nIt allows all notification related features.\n\n\n#### This default permission set includes:\n\n- `allow-is-permission-granted`\n- `allow-request-permission`\n- `allow-notify`\n- `allow-register-action-types`\n- `allow-register-listener`\n- `allow-cancel`\n- `allow-get-pending`\n- `allow-remove-active`\n- `allow-get-active`\n- `allow-check-permissions`\n- `allow-show`\n- `allow-batch`\n- `allow-list-channels`\n- `allow-delete-channel`\n- `allow-create-channel`\n- `allow-permission-state`",
           "type": "string",

packages/tauri-app/src-tauri/src/main.rs

@@ -8,10 +8,14 @@ use serde::Deserialize;
 use serde_json::json;
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Mutex;
+use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
 use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
 use tauri::webview::Webview;
-use tauri::{AppHandle, Emitter, Manager, Runtime, Wry};
+use tauri::{AppHandle, Emitter, Manager, Runtime, WindowEvent, Wry};
+use tauri_plugin_global_shortcut::{
+    Code as ShortcutCode, GlobalShortcutExt, Shortcut, ShortcutState,
+};
 use tauri_plugin_opener::OpenerExt;
 use url::Url;
 
@@ -25,6 +29,10 @@ use std::os::windows::ffi::OsStrExt;
 use windows_sys::Win32::UI::Shell::SetCurrentProcessExplicitAppUserModelID;
 
 static QUIT_REQUESTED: AtomicBool = AtomicBool::new(false);
+const DEFAULT_ZOOM_LEVEL: f64 = 1.0;
+const ZOOM_STEP: f64 = 0.2;
+const MIN_ZOOM_LEVEL: f64 = 0.2;
+const MAX_ZOOM_LEVEL: f64 = 5.0;
 
 #[cfg(windows)]
 const WINDOWS_APP_USER_MODEL_ID: &str = "ai.neuralnomads.codenomad.client";
@@ -32,6 +40,7 @@ const WINDOWS_APP_USER_MODEL_ID: &str = "ai.neuralnomads.codenomad.client";
 pub struct AppState {
     pub manager: CliProcessManager,
     pub wake_lock: Mutex<Option<KeepAwake>>,
+    pub zoom_level: Mutex<f64>,
 }
 
 #[derive(Debug, Default, Deserialize)]
@@ -157,6 +166,83 @@ fn emit_folder_drop_event(
     }
 }
 
+fn clamp_zoom_level(value: f64) -> f64 {
+    value.clamp(MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL)
+}
+
+fn set_main_window_zoom(app_handle: &AppHandle, next_zoom: f64) {
+    if let Some(window) = app_handle.get_webview_window("main") {
+        let normalized = clamp_zoom_level(next_zoom);
+        if window.set_zoom(normalized).is_ok() {
+            if let Ok(mut zoom_level) = app_handle.state::<AppState>().zoom_level.lock() {
+                *zoom_level = normalized;
+            }
+        }
+    }
+}
+
+fn reload_main_window(app_handle: &AppHandle) {
+    if let Some(window) = app_handle.get_webview_window("main") {
+        let _ = window.reload();
+    }
+}
+
+fn force_reload_main_window(app_handle: &AppHandle) {
+    if let Some(window) = app_handle.get_webview_window("main") {
+        if let Ok(mut url) = window.url() {
+            if should_allow_internal(&url) {
+                let reload_token = SystemTime::now()
+                    .duration_since(UNIX_EPOCH)
+                    .unwrap_or_default()
+                    .as_millis()
+                    .to_string();
+
+                let existing_pairs: Vec<(String, String)> = url
+                    .query_pairs()
+                    .into_owned()
+                    .filter(|(key, _)| key != "__codenomad_force_reload")
+                    .collect();
+
+                {
+                    let mut pairs = url.query_pairs_mut();
+                    pairs.clear();
+                    for (key, value) in existing_pairs {
+                        pairs.append_pair(&key, &value);
+                    }
+                    pairs.append_pair("__codenomad_force_reload", &reload_token);
+                }
+
+                let _ = window.navigate(url);
+                return;
+            }
+        }
+
+        let _ = window.reload();
+    }
+}
+
+fn toggle_fullscreen_window(app_handle: &AppHandle) {
+    if let Some(window) = app_handle.get_webview_window("main") {
+        let next_fullscreen = !window.is_fullscreen().unwrap_or(false);
+        let _ = window.set_fullscreen(next_fullscreen);
+        if cfg!(not(target_os = "macos")) {
+            if next_fullscreen {
+                let _ = window.hide_menu();
+            } else {
+                let _ = window.show_menu();
+            }
+        }
+    }
+}
+
+fn fullscreen_shortcut() -> Option<Shortcut> {
+    if cfg!(target_os = "macos") {
+        None
+    } else {
+        Some(Shortcut::new(None, ShortcutCode::F11))
+    }
+}
+
 #[cfg(windows)]
 fn set_windows_app_user_model_id() {
     let app_id: Vec<u16> = OsStr::new(WINDOWS_APP_USER_MODEL_ID)
@@ -181,15 +267,48 @@ fn main() {
     tauri::Builder::default()
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_opener::init())
+        .plugin(
+            tauri_plugin_global_shortcut::Builder::new()
+                .with_handler(|app, shortcut, event| {
+                    if event.state() != ShortcutState::Pressed {
+                        return;
+                    }
+
+                    if fullscreen_shortcut().as_ref() == Some(shortcut) {
+                        toggle_fullscreen_window(app);
+                    }
+                })
+                .build(),
+        )
         .plugin(tauri_plugin_notification::init())
         .plugin(navigation_guard)
         .manage(AppState {
             manager: CliProcessManager::new(),
             wake_lock: Mutex::new(None),
+            zoom_level: Mutex::new(DEFAULT_ZOOM_LEVEL),
         })
         .setup(|app| {
             set_windows_app_user_model_id();
             build_menu(&app.handle())?;
+            if let Some(shortcut) = fullscreen_shortcut() {
+                let shortcut_manager = app.handle().global_shortcut();
+                let _ = shortcut_manager.register(shortcut.clone());
+
+                if let Some(window) = app.get_webview_window("main") {
+                    let app_handle = app.handle().clone();
+                    window.on_window_event(move |event| {
+                        if let WindowEvent::Focused(focused) = event {
+                            let shortcut_manager = app_handle.global_shortcut();
+                            if *focused {
+                                let _ = shortcut_manager.register(shortcut.clone());
+                            } else {
+                                let _ = shortcut_manager.unregister(shortcut.clone());
+                            }
+                        }
+                    });
+                }
+            }
+
             let dev_mode = is_dev_mode();
             let app_handle = app.handle().clone();
             let manager = app.state::<AppState>().manager.clone();
@@ -214,36 +333,42 @@ fn main() {
                         let _ = window.emit("menu:newInstance", ());
                     }
                 }
-                "close" => {
-                    if let Some(window) = app_handle.get_webview_window("main") {
-                        let _ = window.close();
-                    }
-                }
                 "quit" => {
                     app_handle.exit(0);
                 }
 
                 // View menu
                 "reload" => {
-                    if let Some(window) = app_handle.get_webview_window("main") {
+                    reload_main_window(app_handle);
-                        let _ = window.eval("window.location.reload()");
-                    }
                 }
                 "force_reload" => {
-                    if let Some(window) = app_handle.get_webview_window("main") {
+                    force_reload_main_window(app_handle);
-                        let _ = window.eval("window.location.reload(true)");
-                    }
                 }
                 "toggle_devtools" => {
                     if let Some(window) = app_handle.get_webview_window("main") {
-                        window.open_devtools();
+                        if window.is_devtools_open() {
+                            window.close_devtools();
+                        } else {
+                            window.open_devtools();
+                        }
+                    }
+                }
+                "reset_zoom" => {
+                    set_main_window_zoom(app_handle, DEFAULT_ZOOM_LEVEL);
+                }
+                "zoom_in" => {
+                    if let Ok(zoom_level) = app_handle.state::<AppState>().zoom_level.lock() {
+                        set_main_window_zoom(app_handle, *zoom_level + ZOOM_STEP);
+                    }
+                }
+                "zoom_out" => {
+                    if let Ok(zoom_level) = app_handle.state::<AppState>().zoom_level.lock() {
+                        set_main_window_zoom(app_handle, *zoom_level - ZOOM_STEP);
                     }
                 }
 
                 "toggle_fullscreen" => {
-                    if let Some(window) = app_handle.get_webview_window("main") {
+                    toggle_fullscreen_window(app_handle);
-                        let _ = window.set_fullscreen(!window.is_fullscreen().unwrap_or(false));
-                    }
                 }
 
                 // Window menu
@@ -257,6 +382,11 @@ fn main() {
                         let _ = window.maximize();
                     }
                 }
+                "close_window" => {
+                    if let Some(window) = app_handle.get_webview_window("main") {
+                        let _ = window.close();
+                    }
+                }
 
                 // App menu (macOS)
                 "about" => {
@@ -344,6 +474,7 @@ fn main() {
 
 fn build_menu(app: &AppHandle) -> tauri::Result<()> {
     let is_mac = cfg!(target_os = "macos");
+    let is_linux = cfg!(target_os = "linux");
 
     // Create submenus
     let mut submenus = Vec::new();
@@ -371,16 +502,74 @@ fn build_menu(app: &AppHandle) -> tauri::Result<()> {
         Some("CmdOrCtrl+N"),
     )?;
 
-    let file_menu = SubmenuBuilder::new(app, "File")
+    let file_menu = if is_mac {
-        .item(&new_instance_item)
+        SubmenuBuilder::new(app, "File")
-        .separator()
+            .item(&new_instance_item)
-        .text(
+            .separator()
-            if is_mac { "close" } else { "quit" },
+            .close_window()
-            if is_mac { "Close" } else { "Quit" },
+            .build()?
-        )
+    } else {
-        .build()?;
+        SubmenuBuilder::new(app, "File")
+            .item(&new_instance_item)
+            .separator()
+            .text("quit", "Quit")
+            .build()?
+    };
     submenus.push(file_menu);
 
+    let reload_item = MenuItem::with_id(app, "reload", "Reload", true, Some("CmdOrCtrl+R"))?;
+    let force_reload_item = MenuItem::with_id(
+        app,
+        "force_reload",
+        "Force Reload",
+        true,
+        Some("CmdOrCtrl+Shift+R"),
+    )?;
+    let toggle_devtools_item = MenuItem::with_id(
+        app,
+        "toggle_devtools",
+        "Toggle Developer Tools",
+        true,
+        Some("Alt+CmdOrCtrl+I"),
+    )?;
+    let reset_zoom_item =
+        MenuItem::with_id(app, "reset_zoom", "Actual Size", true, Some("CmdOrCtrl+0"))?;
+    let zoom_in_item = MenuItem::with_id(
+        app,
+        "zoom_in",
+        if is_mac { "Zoom In" } else { "Zoom In\tCtrl++" },
+        true,
+        None::<&str>,
+    )?;
+    let zoom_out_item = MenuItem::with_id(
+        app,
+        "zoom_out",
+        if is_mac {
+            "Zoom Out"
+        } else {
+            "Zoom Out\tCtrl+-"
+        },
+        true,
+        None::<&str>,
+    )?;
+    let toggle_fullscreen_item = MenuItem::with_id(
+        app,
+        "toggle_fullscreen",
+        if is_mac {
+            "Toggle Full Screen"
+        } else {
+            "Toggle Full Screen\tF11"
+        },
+        true,
+        if is_mac {
+            Some("Ctrl+Cmd+F")
+        } else {
+            None::<&str>
+        },
+    )?;
+    let close_window_item =
+        MenuItem::with_id(app, "close_window", "Close", true, Some("CmdOrCtrl+W"))?;
+
     // Edit menu with predefined items for standard functionality
     let edit_menu = SubmenuBuilder::new(app, "Edit")
         .undo()
@@ -396,20 +585,39 @@ fn build_menu(app: &AppHandle) -> tauri::Result<()> {
 
     // View menu
     let view_menu = SubmenuBuilder::new(app, "View")
-        .text("reload", "Reload")
+        .item(&reload_item)
-        .text("force_reload", "Force Reload")
+        .item(&force_reload_item)
-        .text("toggle_devtools", "Toggle Developer Tools")
+        .item(&toggle_devtools_item)
         .separator()
+        .item(&reset_zoom_item)
+        .item(&zoom_in_item)
+        .item(&zoom_out_item)
         .separator()
-        .text("toggle_fullscreen", "Toggle Full Screen")
+        .item(&toggle_fullscreen_item)
         .build()?;
     submenus.push(view_menu);
 
     // Window menu
-    let window_menu = SubmenuBuilder::new(app, "Window")
+    let window_menu = if is_linux {
-        .text("minimize", "Minimize")
+        SubmenuBuilder::new(app, "Window")
-        .text("zoom", "Zoom")
+            .text("minimize", "Minimize")
-        .build()?;
+            .text("zoom", "Zoom")
+            .separator()
+            .item(&close_window_item)
+            .build()?
+    } else if is_mac {
+        SubmenuBuilder::new(app, "Window")
+            .minimize()
+            .maximize()
+            .build()?
+    } else {
+        SubmenuBuilder::new(app, "Window")
+            .minimize()
+            .maximize()
+            .separator()
+            .close_window()
+            .build()?
+    };
     submenus.push(window_menu);
 
     // Build the main menu with all submenus

packages/ui/src/App.tsx

@@ -11,10 +11,8 @@ import InstanceDisconnectedModal from "./components/instance-disconnected-modal"
 import InstanceShell from "./components/instance/instance-shell2"
 import { SettingsScreen } from "./components/settings-screen"
 import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
-import { initMarkdown } from "./lib/markdown"
 import { initGithubStars } from "./stores/github-stars"
 
-import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
 import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
 import { getLogger } from "./lib/logger"
@@ -59,7 +57,6 @@ import { openSettings } from "./stores/settings-screen"
 const log = getLogger("actions")
 
 const App: Component = () => {
-  const { isDark } = useTheme()
   const { t } = useI18n()
   const {
     preferences,
@@ -183,10 +180,6 @@ const App: Component = () => {
     }
   })
 
-  createEffect(() => {
-    void initMarkdown(isDark()).catch((error) => log.error("Failed to initialize markdown", error))
-  })
-
   createEffect(() => {
     initReleaseNotifications()
   })

packages/ui/src/components/code-block-inline.tsx

@@ -1,7 +1,8 @@
 import { createSignal, onMount, Show, createEffect } from "solid-js"
 import type { Highlighter } from "shiki/bundle/full"
 import { useTheme } from "../lib/theme"
-import { getSharedHighlighter, escapeHtml } from "../lib/markdown"
+import { getSharedHighlighter } from "../lib/markdown"
+import { escapeHtml } from "../lib/text-render-utils"
 import { copyToClipboard } from "../lib/clipboard"
 import { useI18n } from "../lib/i18n"
 

packages/ui/src/components/diff-viewer.tsx

@@ -1,9 +1,10 @@
 import { createMemo, Show, createEffect, onCleanup } from "solid-js"
 import { DiffView, DiffModeEnum } from "@git-diff-view/solid"
+import "@git-diff-view/solid/styles/diff-view-pure.css"
 import { disableCache } from "@git-diff-view/core"
 import type { DiffHighlighterLang } from "@git-diff-view/core"
 import { ErrorBoundary } from "solid-js"
-import { getLanguageFromPath } from "../lib/markdown"
+import { getLanguageFromPath } from "../lib/text-render-utils"
 import { normalizeDiffText } from "../lib/diff-utils"
 import { setCacheEntry } from "../lib/global-cache"
 import type { CacheEntryParams } from "../lib/global-cache"

packages/ui/src/components/instance-welcome-view.tsx

@@ -404,6 +404,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                                 <div class="flex items-center gap-2">
                                   <span
                                     class="text-sm font-medium text-primary whitespace-normal break-words transition-colors"
+                                    dir="auto"
                                     classList={{
                                       "text-accent": isFocused(),
                                     }}

packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx

@@ -1,8 +1,10 @@
 import {
   Show,
+  Suspense,
   createEffect,
   createMemo,
   createSignal,
+  lazy,
   onCleanup,
   type Accessor,
   type Component,
@@ -20,11 +22,6 @@ import type { Session } from "../../../../types/session"
 import type { DrawerViewState } from "../types"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode, RightPanelTab } from "./types"
 
-import ChangesTab from "./tabs/ChangesTab"
-import FilesTab from "./tabs/FilesTab"
-import GitChangesTab from "./tabs/GitChangesTab"
-import StatusTab from "./tabs/StatusTab"
-
 import { getDefaultWorktreeSlug, getOrCreateWorktreeClient, getWorktreeSlugForSession } from "../../../../stores/worktrees"
 import { requestData } from "../../../../lib/opencode-api"
 import { buildUnifiedDiffFromSdkPatch, tryReverseApplyUnifiedDiff } from "../../../../lib/unified-diff-reverse"
@@ -49,6 +46,15 @@ import {
   readStoredRightPanelTab,
 } from "../storage"
 
+const LazyChangesTab = lazy(() => import("./tabs/ChangesTab"))
+const LazyGitChangesTab = lazy(() => import("./tabs/GitChangesTab"))
+const LazyFilesTab = lazy(() => import("./tabs/FilesTab"))
+const LazyStatusTab = lazy(() => import("./tabs/StatusTab"))
+
+function RightPanelTabFallback() {
+  return <div class="flex-1 min-h-0" />
+}
+
 interface RightPanelProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -565,6 +571,13 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     void loadBrowserEntries(browserPath())
   })
 
+  createEffect(() => {
+    if (rightPanelTab() === "files") return
+    setBrowserSelectedContent(null)
+    setBrowserSelectedLoading(false)
+    setBrowserSelectedError(null)
+  })
+
   createEffect(() => {
     if (rightPanelTab() !== "git-changes") return
     if (gitStatusLoading()) return
@@ -572,6 +585,14 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     void loadGitStatus()
   })
 
+  createEffect(() => {
+    if (rightPanelTab() === "git-changes") return
+    setGitSelectedBefore(null)
+    setGitSelectedAfter(null)
+    setGitSelectedLoading(false)
+    setGitSelectedError(null)
+  })
+
   const handleSelectChangesFile = (file: string, closeList: boolean) => {
     setSelectedFile(file)
     if (closeList) {
@@ -738,101 +759,109 @@ const RightPanel: Component<RightPanelProps> = (props) => {
 
       <div class="flex-1 overflow-y-auto">
         <Show when={rightPanelTab() === "changes"}>
-          <ChangesTab
+          <Suspense fallback={<RightPanelTabFallback />}>
-            t={props.t}
+            <LazyChangesTab
-            instanceId={props.instanceId}
+              t={props.t}
-            activeSessionId={props.activeSessionId}
+              instanceId={props.instanceId}
-            activeSessionDiffs={props.activeSessionDiffs}
+              activeSessionId={props.activeSessionId}
-            selectedFile={selectedFile}
+              activeSessionDiffs={props.activeSessionDiffs}
-            onSelectFile={handleSelectChangesFile}
+              selectedFile={selectedFile}
-            diffViewMode={diffViewMode}
+              onSelectFile={handleSelectChangesFile}
-            diffContextMode={diffContextMode}
+              diffViewMode={diffViewMode}
-            diffWordWrapMode={diffWordWrapMode}
+              diffContextMode={diffContextMode}
-            onViewModeChange={setDiffViewMode}
+              diffWordWrapMode={diffWordWrapMode}
-            onContextModeChange={setDiffContextMode}
+              onViewModeChange={setDiffViewMode}
-            onWordWrapModeChange={setDiffWordWrapMode}
+              onContextModeChange={setDiffContextMode}
-            listOpen={changesListOpen}
+              onWordWrapModeChange={setDiffWordWrapMode}
-            onToggleList={toggleChangesList}
+              listOpen={changesListOpen}
-            splitWidth={changesSplitWidth}
+              onToggleList={toggleChangesList}
-            onResizeMouseDown={handleSplitResizeMouseDown("changes")}
+              splitWidth={changesSplitWidth}
-            onResizeTouchStart={handleSplitResizeTouchStart("changes")}
+              onResizeMouseDown={handleSplitResizeMouseDown("changes")}
-            isPhoneLayout={props.isPhoneLayout}
+              onResizeTouchStart={handleSplitResizeTouchStart("changes")}
-          />
+              isPhoneLayout={props.isPhoneLayout}
+            />
+          </Suspense>
         </Show>
 
         <Show when={rightPanelTab() === "git-changes"}>
-          <GitChangesTab
+          <Suspense fallback={<RightPanelTabFallback />}>
-            t={props.t}
+            <LazyGitChangesTab
-            activeSessionId={props.activeSessionId}
+              t={props.t}
-            entries={gitStatusEntries}
+              activeSessionId={props.activeSessionId}
-            statusLoading={gitStatusLoading}
+              entries={gitStatusEntries}
-            statusError={gitStatusError}
+              statusLoading={gitStatusLoading}
-            selectedPath={gitSelectedPath}
+              statusError={gitStatusError}
-            selectedLoading={gitSelectedLoading}
+              selectedPath={gitSelectedPath}
-            selectedError={gitSelectedError}
+              selectedLoading={gitSelectedLoading}
-            selectedBefore={gitSelectedBefore}
+              selectedError={gitSelectedError}
-            selectedAfter={gitSelectedAfter}
+              selectedBefore={gitSelectedBefore}
-            mostChangedPath={gitMostChangedPath}
+              selectedAfter={gitSelectedAfter}
-            scopeKey={gitScopeKey}
+              mostChangedPath={gitMostChangedPath}
-            diffViewMode={diffViewMode}
+              scopeKey={gitScopeKey}
-            diffContextMode={diffContextMode}
+              diffViewMode={diffViewMode}
-            diffWordWrapMode={diffWordWrapMode}
+              diffContextMode={diffContextMode}
-            onViewModeChange={setDiffViewMode}
+              diffWordWrapMode={diffWordWrapMode}
-            onContextModeChange={setDiffContextMode}
+              onViewModeChange={setDiffViewMode}
-            onWordWrapModeChange={setDiffWordWrapMode}
+              onContextModeChange={setDiffContextMode}
-            onOpenFile={(path) => void openGitFile(path)}
+              onWordWrapModeChange={setDiffWordWrapMode}
-            onRefresh={() => void refreshGitStatus()}
+              onOpenFile={(path: string) => void openGitFile(path)}
-            listOpen={gitChangesListOpen}
+              onRefresh={() => void refreshGitStatus()}
-            onToggleList={toggleGitList}
+              listOpen={gitChangesListOpen}
-            splitWidth={gitChangesSplitWidth}
+              onToggleList={toggleGitList}
-            onResizeMouseDown={handleSplitResizeMouseDown("git-changes")}
+              splitWidth={gitChangesSplitWidth}
-            onResizeTouchStart={handleSplitResizeTouchStart("git-changes")}
+              onResizeMouseDown={handleSplitResizeMouseDown("git-changes")}
-            isPhoneLayout={props.isPhoneLayout}
+              onResizeTouchStart={handleSplitResizeTouchStart("git-changes")}
-          />
+              isPhoneLayout={props.isPhoneLayout}
+            />
+          </Suspense>
         </Show>
 
         <Show when={rightPanelTab() === "files"}>
-          <FilesTab
+          <Suspense fallback={<RightPanelTabFallback />}>
-            t={props.t}
+            <LazyFilesTab
-            browserPath={browserPath}
+              t={props.t}
-            browserEntries={browserEntries}
+              browserPath={browserPath}
-            browserLoading={browserLoading}
+              browserEntries={browserEntries}
-            browserError={browserError}
+              browserLoading={browserLoading}
-            browserSelectedPath={browserSelectedPath}
+              browserError={browserError}
-            browserSelectedContent={browserSelectedContent}
+              browserSelectedPath={browserSelectedPath}
-            browserSelectedLoading={browserSelectedLoading}
+              browserSelectedContent={browserSelectedContent}
-            browserSelectedError={browserSelectedError}
+              browserSelectedLoading={browserSelectedLoading}
-            parentPath={browserParentPath}
+              browserSelectedError={browserSelectedError}
-            scopeKey={browserScopeKey}
+              parentPath={browserParentPath}
-            onLoadEntries={(path) => void loadBrowserEntries(path)}
+              scopeKey={browserScopeKey}
-            onOpenFile={(path) => void openBrowserFile(path)}
+              onLoadEntries={(path: string) => void loadBrowserEntries(path)}
-            onRefresh={() => void refreshFilesTab()}
+              onOpenFile={(path: string) => void openBrowserFile(path)}
-            listOpen={filesListOpen}
+              onRefresh={() => void refreshFilesTab()}
-            onToggleList={toggleFilesList}
+              listOpen={filesListOpen}
-            splitWidth={filesSplitWidth}
+              onToggleList={toggleFilesList}
-            onResizeMouseDown={handleSplitResizeMouseDown("files")}
+              splitWidth={filesSplitWidth}
-            onResizeTouchStart={handleSplitResizeTouchStart("files")}
+              onResizeMouseDown={handleSplitResizeMouseDown("files")}
-            isPhoneLayout={props.isPhoneLayout}
+              onResizeTouchStart={handleSplitResizeTouchStart("files")}
-          />
+              isPhoneLayout={props.isPhoneLayout}
+            />
+          </Suspense>
         </Show>
 
         <Show when={rightPanelTab() === "status"}>
-          <StatusTab
+          <Suspense fallback={<RightPanelTabFallback />}>
-            t={props.t}
+            <LazyStatusTab
-            instanceId={props.instanceId}
+              t={props.t}
-            instance={props.instance}
+              instanceId={props.instanceId}
-            activeSessionId={props.activeSessionId}
+              instance={props.instance}
-            activeSession={props.activeSession}
+              activeSessionId={props.activeSessionId}
-            activeSessionDiffs={props.activeSessionDiffs}
+              activeSession={props.activeSession}
-            latestTodoState={props.latestTodoState}
+              activeSessionDiffs={props.activeSessionDiffs}
-            backgroundProcessList={props.backgroundProcessList}
+              latestTodoState={props.latestTodoState}
-            onOpenBackgroundOutput={props.onOpenBackgroundOutput}
+              backgroundProcessList={props.backgroundProcessList}
-            onStopBackgroundProcess={props.onStopBackgroundProcess}
+              onOpenBackgroundOutput={props.onOpenBackgroundOutput}
-            onTerminateBackgroundProcess={props.onTerminateBackgroundProcess}
+              onStopBackgroundProcess={props.onStopBackgroundProcess}
-            expandedItems={rightPanelExpandedItems}
+              onTerminateBackgroundProcess={props.onTerminateBackgroundProcess}
-            onExpandedItemsChange={handleAccordionChange}
+              expandedItems={rightPanelExpandedItems}
-            onOpenChangesTab={openChangesTabFromStatus}
+              onExpandedItemsChange={handleAccordionChange}
-          />
+              onOpenChangesTab={openChangesTabFromStatus}
+            />
+          </Suspense>
         </Show>
       </div>
     </div>

packages/ui/src/components/instance/shell/right-panel/tabs/ChangesTab.tsx

@@ -1,11 +1,13 @@
-import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
-
-import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
 
 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
 
+const LazyMonacoDiffViewer = lazy(() =>
+  import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
+)
+
 interface ChangesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -113,15 +115,23 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
             }
           >
             {(file) => (
-              <MonacoDiffViewer
+              <Suspense
-                scopeKey={scopeKey()}
+                fallback={
-                path={String(file().file || "")}
+                  <div class="file-viewer-empty">
-                before={String((file() as any).before || "")}
+                    <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
-                after={String((file() as any).after || "")}
+                  </div>
-                viewMode={props.diffViewMode()}
+                }
-                contextMode={props.diffContextMode()}
+              >
-                wordWrap={props.diffWordWrapMode()}
+                <LazyMonacoDiffViewer
-              />
+                  scopeKey={scopeKey()}
+                  path={String(file().file || "")}
+                  before={String((file() as any).before || "")}
+                  after={String((file() as any).after || "")}
+                  viewMode={props.diffViewMode()}
+                  contextMode={props.diffContextMode()}
+                  wordWrap={props.diffWordWrapMode()}
+                />
+              </Suspense>
             )}
           </Show>
         </div>
@@ -220,7 +230,7 @@ const ChangesTab: Component<ChangesTabProps> = (props) => {
         onResizeMouseDown={props.onResizeMouseDown}
         onResizeTouchStart={props.onResizeTouchStart}
         isPhoneLayout={props.isPhoneLayout()}
-        overlayAriaLabel="Changes"
+        overlayAriaLabel={props.t("instanceShell.rightPanel.tabs.changes")}
       />
     )
   }

packages/ui/src/components/instance/shell/right-panel/tabs/FilesTab.tsx

@@ -1,12 +1,14 @@
-import { For, Show, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, Suspense, lazy, type Accessor, type Component, type JSX } from "solid-js"
 import type { FileNode } from "@opencode-ai/sdk/v2/client"
 
 import { RefreshCw } from "lucide-solid"
 
-import { MonacoFileViewer } from "../../../../file-viewer/monaco-file-viewer"
-
 import SplitFilePanel from "../components/SplitFilePanel"
 
+const LazyMonacoFileViewer = lazy(() =>
+  import("../../../../file-viewer/monaco-file-viewer").then((module) => ({ default: module.MonacoFileViewer })),
+)
+
 interface FilesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -51,8 +53,8 @@ const FilesTab: Component<FilesTabProps> = (props) => {
     const headerDisplayedPath = () => props.browserSelectedPath() || props.browserPath()
 
     const emptyViewerMessage = () => {
-      if (props.browserLoading() && entriesValue === null) return "Loading files..."
+      if (props.browserLoading() && entriesValue === null) return props.t("instanceInfo.loading")
-      return "Select a file to preview"
+      return props.t("instanceShell.filesShell.viewerEmpty")
     }
 
     const renderViewer = () => (
@@ -77,7 +79,15 @@ const FilesTab: Component<FilesTabProps> = (props) => {
                     }
                   >
                     {(payload) => (
-                      <MonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
+                      <Suspense
+                        fallback={
+                          <div class="file-viewer-empty">
+                            <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
+                          </div>
+                        }
+                      >
+                        <LazyMonacoFileViewer scopeKey={props.scopeKey()} path={payload().path} content={payload().content} />
+                      </Suspense>
                     )}
                   </Show>
                 }
@@ -91,7 +101,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
             }
           >
             <div class="file-viewer-empty">
-              <span class="file-viewer-empty-text">Loading…</span>
+              <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
             </div>
           </Show>
         </div>
@@ -113,7 +123,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
         </Show>
 
         <Show when={props.browserLoading() && entriesValue === null}>
-          <div class="p-3 text-xs text-secondary">Loading files...</div>
+          <div class="p-3 text-xs text-secondary">{props.t("instanceInfo.loading")}</div>
         </Show>
 
         <For each={sorted}>
@@ -154,7 +164,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
                 </span>
               </span>
               <Show when={props.browserLoading()}>
-                <span>Loading…</span>
+                <span>{props.t("instanceInfo.loading")}</span>
               </Show>
               <Show when={props.browserError()}>{(err) => <span class="text-error">{err()}</span>}</Show>
             </div>
@@ -180,7 +190,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
         onResizeMouseDown={props.onResizeMouseDown}
         onResizeTouchStart={props.onResizeTouchStart}
         isPhoneLayout={props.isPhoneLayout()}
-        overlayAriaLabel="Files"
+        overlayAriaLabel={props.t("instanceShell.rightPanel.tabs.files")}
       />
     )
   }

packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx

@@ -1,14 +1,16 @@
-import { For, Show, createMemo, type Accessor, type Component, type JSX } from "solid-js"
+import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
 import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
 
 import { RefreshCw } from "lucide-solid"
 
-import { MonacoDiffViewer } from "../../../../file-viewer/monaco-diff-viewer"
-
 import DiffToolbar from "../components/DiffToolbar"
 import SplitFilePanel from "../components/SplitFilePanel"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
 
+const LazyMonacoDiffViewer = lazy(() =>
+  import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
+)
+
 interface GitChangesTabProps {
   t: (key: string, vars?: Record<string, any>) => string
 
@@ -80,11 +82,11 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
   })
 
   const emptyViewerMessage = createMemo(() => {
-    if (!hasSession()) return "Select a session to view changes."
+    if (!hasSession()) return props.t("instanceShell.sessionChanges.noSessionSelected")
     const currentEntries = entries()
-    if (currentEntries === null) return "Loading git changes…"
+    if (currentEntries === null) return props.t("instanceShell.gitChanges.loading")
-    if (nonDeleted().length === 0) return "No git changes yet."
+    if (nonDeleted().length === 0) return props.t("instanceShell.gitChanges.empty")
-    return "No file selected."
+    return props.t("instanceShell.filesShell.viewerEmpty")
   })
 
   const renderContent = (): JSX.Element => {
@@ -122,7 +124,14 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                     }
                   >
                     {(file) => (
-                        <MonacoDiffViewer
+                      <Suspense
+                        fallback={
+                          <div class="file-viewer-empty">
+                            <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
+                          </div>
+                        }
+                      >
+                        <LazyMonacoDiffViewer
                           scopeKey={props.scopeKey()}
                           path={String(file().path || "")}
                           before={String((file() as any).before || "")}
@@ -131,7 +140,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                           contextMode={props.diffContextMode()}
                           wordWrap={props.diffWordWrapMode()}
                         />
-                      )}
+                      </Suspense>
+                    )}
                   </Show>
                 }
               >
@@ -144,7 +154,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
             }
           >
             <div class="file-viewer-empty">
-              <span class="file-viewer-empty-text">Loading…</span>
+              <span class="file-viewer-empty-text">{props.t("instanceInfo.loading")}</span>
             </div>
           </Show>
         </div>
@@ -169,7 +179,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                 </div>
                 <div class="file-list-item-stats">
                   <Show when={item.status === "deleted"}>
-                    <span class="text-[10px] text-secondary">deleted</span>
+                    <span class="text-[10px] text-secondary">{props.t("instanceShell.gitChanges.deleted")}</span>
                   </Show>
                   <Show when={item.status !== "deleted"}>
                     <>
@@ -200,7 +210,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
                 </div>
                 <div class="file-list-item-stats">
                   <Show when={item.status === "deleted"}>
-                    <span class="text-[10px] text-secondary">deleted</span>
+                    <span class="text-[10px] text-secondary">{props.t("instanceShell.gitChanges.deleted")}</span>
                   </Show>
                   <Show when={item.status !== "deleted"}>
                     <>
@@ -220,8 +230,8 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
           <SplitFilePanel
             header={
               <>
-                <span class="files-tab-selected-path" title={selected?.path || "Git Changes"}>
+                <span class="files-tab-selected-path" title={selected?.path || props.t("instanceShell.rightPanel.tabs.gitChanges")}>
-                  <span class="file-path-text">{selected?.path || "Git Changes"}</span>
+                  <span class="file-path-text">{selected?.path || props.t("instanceShell.rightPanel.tabs.gitChanges")}</span>
                 </span>
 
             <div class="files-tab-stats" style={{ flex: "0 0 auto" }}>
@@ -264,7 +274,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
         onResizeMouseDown={props.onResizeMouseDown}
         onResizeTouchStart={props.onResizeTouchStart}
         isPhoneLayout={props.isPhoneLayout()}
-        overlayAriaLabel="Git Changes"
+        overlayAriaLabel={props.t("instanceShell.rightPanel.tabs.gitChanges")}
       />
     )
   }

packages/ui/src/components/markdown.tsx

@@ -1,5 +1,4 @@
 import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
-import { renderMarkdown, onLanguagesLoaded, decodeHtmlEntities, setMarkdownTheme } from "../lib/markdown"
 import { useGlobalCache } from "../lib/hooks/use-global-cache"
 import type { TextPart, RenderCache } from "../types/message"
 import { getLogger } from "../lib/logger"
@@ -8,6 +7,20 @@ import { useI18n } from "../lib/i18n"
 
 const log = getLogger("session")
 
+type MarkdownModule = typeof import("../lib/markdown")
+
+let markdownModulePromise: Promise<MarkdownModule> | null = null
+
+function loadMarkdownModule(): Promise<MarkdownModule> {
+  if (!markdownModulePromise) {
+    markdownModulePromise = import("../lib/markdown").catch((error) => {
+      markdownModulePromise = null
+      throw error
+    })
+  }
+  return markdownModulePromise
+}
+
 function hashText(value: string): string {
   let hash = 2166136261
   for (let index = 0; index < value.length; index++) {
@@ -24,6 +37,45 @@ function resolvePartVersion(part: TextPart, text: string): string {
   return `text-${hashText(text)}`
 }
 
+function resolvePartCacheId(part: TextPart, text: string): string {
+  const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : ""
+  if (partId) {
+    return partId
+  }
+
+  return `anonymous:${hashText(text)}`
+}
+
+function decodeHtmlEntitiesLocally(content: string): string {
+  if (!content.includes("&") || typeof document === "undefined") {
+    return content
+  }
+
+  const textarea = document.createElement("textarea")
+  textarea.innerHTML = content
+  return textarea.value
+}
+
+function escapeHtml(content: string): string {
+  const map: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;",
+  }
+
+  return content.replace(/[&<>"']/g, (match) => map[match] ?? match)
+}
+
+function renderFallbackHtml(content: string): string {
+  if (!content) {
+    return ""
+  }
+
+  return escapeHtml(content).replace(/\n/g, "<br />")
+}
+
 interface MarkdownProps {
   part: TextPart
   instanceId?: string
@@ -38,7 +90,8 @@ export function Markdown(props: MarkdownProps) {
   const { t } = useI18n()
   const [html, setHtml] = createSignal("")
   let containerRef: HTMLDivElement | undefined
-  let latestRequestedText = ""
+  let latestRequestKey = ""
+  let cleanupLanguageListener: (() => void) | undefined
 
   const notifyRendered = () => {
     Promise.resolve().then(() => props.onRendered?.())
@@ -47,15 +100,14 @@ export function Markdown(props: MarkdownProps) {
   const resolved = createMemo(() => {
     const part = props.part
     const rawText = typeof part.text === "string" ? part.text : ""
-    const text = decodeHtmlEntities(rawText)
+    const text = decodeHtmlEntitiesLocally(rawText)
     const themeKey = Boolean(props.isDark) ? "dark" : "light"
     const highlightEnabled = !props.disableHighlight
-    const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : ""
+    const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : undefined
-    if (!partId) {
+    const cacheId = resolvePartCacheId(part, text)
-      throw new Error("Markdown rendering requires a part id")
-    }
     const version = resolvePartVersion(part, text)
-    return { part, text, themeKey, highlightEnabled, partId, version }
+    const requestKey = `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${version}`
+    return { part, text, themeKey, highlightEnabled, partId, cacheId, version, requestKey }
   })
 
   const cacheHandle = useGlobalCache({
@@ -63,26 +115,46 @@ export function Markdown(props: MarkdownProps) {
     sessionId: () => props.sessionId,
     scope: "markdown",
     cacheId: () => {
-      const { partId, themeKey, highlightEnabled } = resolved()
+      const { cacheId, themeKey, highlightEnabled } = resolved()
-      return `${partId}:${themeKey}:${highlightEnabled ? 1 : 0}`
+      return `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}`
     },
     version: () => resolved().version,
   })
 
-  createEffect(async () => {
+  const commitCacheEntry = (snapshot: ReturnType<typeof resolved>, renderedHtml: string) => {
-    const { part, text, themeKey, highlightEnabled, version } = resolved()
+    const cacheEntry: RenderCache = {
+      text: snapshot.text,
+      html: renderedHtml,
+      theme: snapshot.themeKey,
+      mode: snapshot.version,
+    }
+    setHtml(renderedHtml)
+    cacheHandle.set(cacheEntry)
+    notifyRendered()
+  }
 
-    // Ensure the markdown highlighter theme matches the active UI theme.
+  const renderSnapshot = async (snapshot: ReturnType<typeof resolved>) => {
-    setMarkdownTheme(themeKey === "dark")
+    const markdown = await loadMarkdownModule()
+    markdown.setMarkdownTheme(snapshot.themeKey === "dark")
+    const rendered = await markdown.renderMarkdown(snapshot.text, {
+      suppressHighlight: !snapshot.highlightEnabled,
+    })
 
-    latestRequestedText = text
+    if (latestRequestKey === snapshot.requestKey) {
+      commitCacheEntry(snapshot, rendered)
+    }
+  }
+
+  createEffect(() => {
+    const snapshot = resolved()
+    latestRequestKey = snapshot.requestKey
 
     const cacheMatches = (cache: RenderCache | undefined) => {
       if (!cache) return false
-      return cache.theme === themeKey && cache.mode === version
+      return cache.theme === snapshot.themeKey && cache.mode === snapshot.version
     }
 
-    const localCache = part.renderCache
+    const localCache = snapshot.part.renderCache
     if (localCache && cacheMatches(localCache)) {
       setHtml(localCache.html)
       notifyRendered()
@@ -96,111 +168,83 @@ export function Markdown(props: MarkdownProps) {
       return
     }
 
-    const commitCacheEntry = (renderedHtml: string) => {
+    setHtml(renderFallbackHtml(snapshot.text))
-      const cacheEntry: RenderCache = { text, html: renderedHtml, theme: themeKey, mode: version }
+    notifyRendered()
-      setHtml(renderedHtml)
-      cacheHandle.set(cacheEntry)
-      notifyRendered()
-    }
 
-    if (!highlightEnabled) {
+    void renderSnapshot(snapshot).catch((error) => {
-      try {
-        const rendered = await renderMarkdown(text, { suppressHighlight: true })
-
-        if (latestRequestedText === text) {
-          commitCacheEntry(rendered)
-        }
-      } catch (error) {
-        log.error("Failed to render markdown:", error)
-        if (latestRequestedText === text) {
-          commitCacheEntry(text)
-        }
-      }
-      return
-    }
-
-    try {
-      const rendered = await renderMarkdown(text)
-      if (latestRequestedText === text) {
-        commitCacheEntry(rendered)
-      }
-    } catch (error) {
       log.error("Failed to render markdown:", error)
-      if (latestRequestedText === text) {
+      if (latestRequestKey === snapshot.requestKey) {
-        commitCacheEntry(text)
+        commitCacheEntry(snapshot, renderFallbackHtml(snapshot.text))
       }
-    }
+    })
   })
 
   onMount(() => {
-    const handleClick = async (e: Event) => {
+    const handleClick = async (event: Event) => {
-      const target = e.target as HTMLElement
+      const target = event.target as HTMLElement
       const copyButton = target.closest(".code-block-copy") as HTMLButtonElement
 
-      if (copyButton) {
+      if (!copyButton) {
-        e.preventDefault()
+        return
-        const code = copyButton.getAttribute("data-code")
-        if (code) {
-          const decodedCode = decodeURIComponent(code)
-          const success = await copyToClipboard(decodedCode)
-          const copyText = copyButton.querySelector(".copy-text")
-          if (copyText) {
-            if (success) {
-              copyText.textContent = t("markdown.codeBlock.copy.copied")
-              setTimeout(() => {
-                copyText.textContent = t("markdown.codeBlock.copy.label")
-              }, 2000)
-            } else {
-              copyText.textContent = t("markdown.codeBlock.copy.failed")
-              setTimeout(() => {
-                copyText.textContent = t("markdown.codeBlock.copy.label")
-              }, 2000)
-            }
-          }
-        }
       }
+
+      event.preventDefault()
+      const code = copyButton.getAttribute("data-code")
+      if (!code) {
+        return
+      }
+
+      const decodedCode = decodeURIComponent(code)
+      const success = await copyToClipboard(decodedCode)
+      const copyText = copyButton.querySelector(".copy-text")
+      if (!copyText) {
+        return
+      }
+
+      copyText.textContent = success ? t("markdown.codeBlock.copy.copied") : t("markdown.codeBlock.copy.failed")
+      setTimeout(() => {
+        copyText.textContent = t("markdown.codeBlock.copy.label")
+      }, 2000)
     }
 
     containerRef?.addEventListener("click", handleClick)
 
-    const cleanupLanguageListener = onLanguagesLoaded(async () => {
+    let disposed = false
-      if (props.disableHighlight) {
+    void loadMarkdownModule()
-        return
+      .then((markdown) => {
-      }
+        if (disposed) {
-
+          return
-      const { part, text, themeKey, version } = resolved()
-
-      setMarkdownTheme(themeKey === "dark")
-
-      if (latestRequestedText !== text) {
-        return
-      }
-
-      try {
-        const rendered = await renderMarkdown(text)
-        if (latestRequestedText === text) {
-          const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey, mode: version }
-          setHtml(rendered)
-          cacheHandle.set(cacheEntry)
-          notifyRendered()
         }
-      } catch (error) {
+
-        log.error("Failed to re-render markdown after language load:", error)
+        cleanupLanguageListener = markdown.onLanguagesLoaded(() => {
-      }
+          const snapshot = resolved()
-    })
+          if (!snapshot.highlightEnabled) {
+            return
+          }
+
+          latestRequestKey = snapshot.requestKey
+          void renderSnapshot(snapshot).catch((error) => {
+            log.error("Failed to re-render markdown after language load:", error)
+          })
+        })
+      })
+      .catch((error) => {
+        log.error("Failed to load markdown module:", error)
+      })
 
     onCleanup(() => {
+      disposed = true
       containerRef?.removeEventListener("click", handleClick)
-      cleanupLanguageListener()
+      cleanupLanguageListener?.()
+      cleanupLanguageListener = undefined
     })
   })
 
-  const proseClass = () => "markdown-body"
-
   return (
     <div
       ref={containerRef}
-      class={proseClass()}
+      class="markdown-body"
+      dir="auto"
       data-view="markdown"
       data-part-id={resolved().partId}
       data-markdown-theme={resolved().themeKey}

packages/ui/src/components/message-block.tsx

@@ -1,7 +1,6 @@
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
+import { For, Match, Show, Suspense, Switch, createEffect, createMemo, createSignal, lazy, onCleanup, untrack } from "solid-js"
 import { ChevronsDownUp, ChevronsUpDown, ExternalLink, FoldVertical, ListStart, Trash } from "lucide-solid"
 import MessageItem from "./message-item"
-import ToolCall from "./tool-call"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 import type { ClientPart, MessageInfo } from "../types/message"
 import { partHasRenderableText } from "../types/message"
@@ -29,6 +28,12 @@ const USER_BORDER_COLOR = "var(--message-user-border)"
 const ASSISTANT_BORDER_COLOR = "var(--message-assistant-border)"
 const TOOL_BORDER_COLOR = "var(--message-tool-border)"
 
+const LazyToolCall = lazy(() => import("./tool-call"))
+
+function ToolCallFallback() {
+  return <div class="tool-call tool-call-loading" />
+}
+
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
 
@@ -500,16 +505,18 @@ function ToolCallItem(props: ToolCallItemProps) {
             </div>
           </div>
 
-          <ToolCall
+          <Suspense fallback={<ToolCallFallback />}>
-            toolCall={resolvedToolPart()}
+            <LazyToolCall
-            toolCallId={props.partId}
+              toolCall={resolvedToolPart()}
-            messageId={props.messageId}
+              toolCallId={props.partId}
-            messageVersion={messageVersion()}
+              messageId={props.messageId}
-            partVersion={partVersion()}
+              messageVersion={messageVersion()}
-            instanceId={props.instanceId}
+              partVersion={partVersion()}
-            sessionId={props.sessionId}
+              instanceId={props.instanceId}
-            onContentRendered={props.onContentRendered}
+              sessionId={props.sessionId}
-          />
+              onContentRendered={props.onContentRendered}
+            />
+          </Suspense>
         </div>
       )}
     </Show>
@@ -902,6 +909,7 @@ export default function MessageBlock(props: MessageBlockProps) {
                     onDeleteMessagesUpTo={props.onDeleteMessagesUpTo}
                     selectedMessageIds={props.selectedMessageIds}
                     onToggleSelectedMessage={props.onToggleSelectedMessage}
+                    onContentRendered={props.onContentRendered}
                   />
                 </Match>
               </Switch>
@@ -1280,6 +1288,7 @@ interface ReasoningCardProps {
   onDeleteMessagesUpTo?: (messageId: string) => void | Promise<void>
   selectedMessageIds?: () => Set<string>
   onToggleSelectedMessage?: (messageId: string, selected: boolean) => void
+  onContentRendered?: () => void
 }
 
 function ReasoningCard(props: ReasoningCardProps) {
@@ -1288,6 +1297,25 @@ function ReasoningCard(props: ReasoningCardProps) {
   const [deletingMessage, setDeletingMessage] = createSignal(false)
   const [deletingUpTo, setDeletingUpTo] = createSignal(false)
   const isSelectedForDeletion = () => Boolean(props.selectedMessageIds?.().has(props.messageId))
+  let pendingRenderNotificationFrame: number | null = null
+
+  const notifyContentRendered = () => {
+    if (!props.onContentRendered || typeof requestAnimationFrame !== "function") return
+    if (pendingRenderNotificationFrame !== null) {
+      cancelAnimationFrame(pendingRenderNotificationFrame)
+    }
+    pendingRenderNotificationFrame = requestAnimationFrame(() => {
+      pendingRenderNotificationFrame = null
+      props.onContentRendered?.()
+    })
+  }
+
+  onCleanup(() => {
+    if (pendingRenderNotificationFrame !== null) {
+      cancelAnimationFrame(pendingRenderNotificationFrame)
+      pendingRenderNotificationFrame = null
+    }
+  })
 
   createEffect(() => {
     setExpanded(Boolean(props.defaultExpanded))
@@ -1356,6 +1384,12 @@ function ReasoningCard(props: ReasoningCardProps) {
   const viewHideLabel = () =>
     expanded() ? t("messageBlock.reasoning.indicator.hide") : t("messageBlock.reasoning.indicator.view")
 
+  createEffect(() => {
+    if (!expanded()) return
+    reasoningText()
+    notifyContentRendered()
+  })
+
   const canDeleteMessage = () => Boolean(props.showDeleteMessage) && !deletingMessage()
 
   const handleDeleteMessage = async (event: MouseEvent) => {

packages/ui/src/components/message-item.tsx

@@ -542,7 +542,7 @@ export default function MessageItem(props: MessageItemProps) {
 
       </header>
 
-      <div class="pt-1 whitespace-pre-wrap break-words leading-[1.1]">
+      <div class="pt-1 whitespace-pre-wrap break-words leading-[1.1]" dir="auto">
 
 
         <Show when={props.isQueued && isUser()}>
@@ -550,7 +550,7 @@ export default function MessageItem(props: MessageItemProps) {
         </Show>
 
         <Show when={errorMessage()}>
-          <div class="message-error-block">⚠️ {errorMessage()}</div>
+          <div class="message-error-block" dir="auto">⚠️ {errorMessage()}</div>
         </Show>
 
         <Show when={isGenerating()}>

packages/ui/src/components/message-part.tsx

@@ -1,5 +1,4 @@
-import { Show, Match, Switch } from "solid-js"
+import { Match, Show, Suspense, Switch, lazy } from "solid-js"
-import ToolCall from "./tool-call"
 import { isItemExpanded, toggleItemExpanded } from "../stores/tool-call-state"
 import { Markdown } from "./markdown"
 import { useTheme } from "../lib/theme"
@@ -7,6 +6,8 @@ import { partHasRenderableText, SDKPart, TextPart, ClientPart } from "../types/m
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
 
+const LazyToolCall = lazy(() => import("./tool-call"))
+
 interface MessagePartProps {
   part: ClientPart
   messageType?: "user" | "assistant"
@@ -133,11 +134,12 @@ export default function MessagePart(props: MessagePartProps) {
         <Show when={!shouldHideTextPart() && partHasRenderableText(props.part)}>
           <div
             class={canRenderMarkdown() ? markdownContainerClass() : textContainerClass()}
+            dir="auto"
             data-role={textContainerRole()}
             data-part-type="text"
             data-part-id={typeof (props.part as any)?.id === "string" ? (props.part as any).id : undefined}
           >
-            <Show when={canRenderMarkdown()} fallback={<span class="text-primary">{plainTextContent()}</span>}>
+            <Show when={canRenderMarkdown()} fallback={<span class="text-primary" dir="auto">{plainTextContent()}</span>}>
               <Markdown
                 part={createTextPartForMarkdown()}
                 instanceId={props.instanceId}
@@ -152,12 +154,14 @@ export default function MessagePart(props: MessagePartProps) {
       </Match>
 
       <Match when={partType() === "tool"}>
-        <ToolCall
+        <Suspense fallback={<div class="tool-call tool-call-loading" />}>
-          toolCall={props.part as ToolCallPart}
+          <LazyToolCall
-          toolCallId={props.part?.id}
+            toolCall={props.part as ToolCallPart}
-          instanceId={props.instanceId}
+            toolCallId={props.part?.id}
-          sessionId={props.sessionId}
+            instanceId={props.instanceId}
-        />
+            sessionId={props.sessionId}
+          />
+        </Suspense>
       </Match>
 
 

packages/ui/src/components/message-section.tsx

@@ -19,7 +19,7 @@ import type { DeleteHoverState } from "../types/delete-hover"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
 import { getPartCharCount } from "../lib/token-utils"
 
-const SCROLL_SENTINEL_MARGIN_PX = 48
+const SCROLL_SENTINEL_MARGIN_PX = 8
 const MESSAGE_SCROLL_CACHE_SCOPE = "message-stream"
 const QUOTE_SELECTION_MAX_LENGTH = 2000
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href

packages/ui/src/components/permission-approval-modal.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createMemo, createSignal, createEffect, onCleanup, type Component } from "solid-js"
+import { For, Show, Suspense, createMemo, createSignal, createEffect, lazy, onCleanup, type Component } from "solid-js"
 import type { PermissionRequestLike } from "../types/permission"
 import { getPermissionCallId, getPermissionDisplayTitle, getPermissionKind, getPermissionMessageId, getPermissionSessionId } from "../types/permission"
 import { getQuestionCallId, getQuestionMessageId, getQuestionSessionId, type QuestionRequest } from "../types/question"
@@ -12,7 +12,8 @@ import {
 } from "../stores/instances"
 import { ensureSessionParentExpanded, loadMessages, sessions as sessionStateSessions, setActiveSessionFromList } from "../stores/sessions"
 import { messageStoreBus } from "../stores/message-v2/bus"
-import ToolCall from "./tool-call"
+
+const LazyToolCall = lazy(() => import("./tool-call"))
 
 interface PermissionApprovalModalProps {
   instanceId: string
@@ -408,15 +409,17 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                             }
                           >
                           {(data) => (
-                            <ToolCall
+                            <Suspense fallback={<div class="tool-call tool-call-loading" />}>
-                              toolCall={data().toolPart}
+                              <LazyToolCall
-                              toolCallId={data().toolPart.id}
+                                toolCall={data().toolPart}
-                              messageId={data().messageId}
+                                toolCallId={data().toolPart.id}
-                              messageVersion={data().messageVersion}
+                                messageId={data().messageId}
-                              partVersion={data().partVersion}
+                                messageVersion={data().messageVersion}
-                              instanceId={props.instanceId}
+                                partVersion={data().partVersion}
-                              sessionId={data().sessionId}
+                                instanceId={props.instanceId}
-                            />
+                                sessionId={data().sessionId}
+                              />
+                            </Suspense>
                           )}
                         </Show>
                       </div>

packages/ui/src/components/prompt-input.tsx

@@ -1,6 +1,5 @@
-import { createSignal, Show, onMount, onCleanup, createEffect, on } from "solid-js"
+import { Suspense, createEffect, createSignal, lazy, on, onCleanup, onMount, Show } from "solid-js"
 import { ArrowBigUp, ArrowBigDown } from "lucide-solid"
-import UnifiedPicker from "./unified-picker"
 import ExpandButton from "./expand-button"
 import { clearAttachments, removeAttachment } from "../stores/attachments"
 import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
@@ -20,6 +19,7 @@ import { usePromptAttachments } from "./prompt-input/usePromptAttachments"
 import { usePromptPicker } from "./prompt-input/usePromptPicker"
 import { usePromptKeyDown } from "./prompt-input/usePromptKeyDown"
 const log = getLogger("actions")
+const LazyUnifiedPicker = lazy(() => import("./unified-picker"))
 
 function getConsumedPastedTextAttachmentIds(text: string, attachments: Attachment[]): string[] {
   if (!text || attachments.length === 0) return []
@@ -467,18 +467,20 @@ export default function PromptInput(props: PromptInputProps) {
         onDrop={handleDrop}
       >
         <Show when={showPicker() && instance()}>
-          <UnifiedPicker
+          <Suspense fallback={null}>
-            open={showPicker()}
+            <LazyUnifiedPicker
-            mode={pickerMode()}
+              open={showPicker()}
-            onClose={handlePickerClose}
+              mode={pickerMode()}
-            onSelect={handlePickerSelect}
+              onClose={handlePickerClose}
-            agents={instanceAgents()}
+              onSelect={handlePickerSelect}
-            commands={getCommands(props.instanceId)}
+              agents={instanceAgents()}
-            instanceClient={instance()!.client}
+              commands={getCommands(props.instanceId)}
-            searchQuery={searchQuery()}
+              instanceClient={instance()!.client}
-            textareaRef={textareaRef}
+              searchQuery={searchQuery()}
-            workspaceId={props.instanceId}
+              textareaRef={textareaRef}
-          />
+              workspaceId={props.instanceId}
+            />
+          </Suspense>
         </Show>
 
         <div class="flex flex-1 flex-col">
@@ -488,6 +490,7 @@ export default function PromptInput(props: PromptInputProps) {
               <textarea
                 ref={textareaRef}
                 class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""} ${expandState() === "expanded" ? "is-expanded" : ""}`}
+                dir="auto"
                 placeholder={getPlaceholder()}
                 value={prompt()}
                 onInput={handleInput}

packages/ui/src/components/session-list.tsx

@@ -444,7 +444,7 @@ const SessionList: Component<SessionListProps> = (props) => {
               </Show>
 
               {rowProps.isChild ? <Bot class="w-4 h-4 flex-shrink-0" /> : <User class="w-4 h-4 flex-shrink-0" />}
-              <span class="session-item-title session-item-title--clamp">{title()}</span>
+              <span class="session-item-title session-item-title--clamp" dir="auto">{title()}</span>
             </div>
           </div>
           <div class="session-item-row session-item-meta">

packages/ui/src/components/session-rename-dialog.tsx

@@ -76,6 +76,7 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
                     inputRef = element
                   }}
                   type="text"
+                  dir="auto"
                   value={title()}
                   onInput={(event) => setTitle(event.currentTarget.value)}
                   placeholder={t("sessionRenameDialog.input.placeholder")}

packages/ui/src/components/tool-call.tsx

@@ -514,6 +514,7 @@ function ToolCallDetails(props: {
   })
 
   const { renderDiffContent } = createDiffContentRenderer({
+    toolState: props.toolState,
     preferences: props.preferences,
     setDiffViewMode: props.setDiffViewMode,
     isDark: props.isDark,

packages/ui/src/components/tool-call/ansi-render.tsx

@@ -1,7 +1,7 @@
 import type { Accessor, JSXElement } from "solid-js"
 import type { RenderCache } from "../../types/message"
 import { ansiToHtml, createAnsiStreamRenderer, hasAnsi } from "../../lib/ansi"
-import { escapeHtml } from "../../lib/markdown"
+import { escapeHtml } from "../../lib/text-render-utils"
 import type { AnsiRenderOptions, ToolScrollHelpers } from "./types"
 
 type AnsiRenderCache = RenderCache & { hasAnsi: boolean }
@@ -20,6 +20,14 @@ export function createAnsiContentRenderer(params: {
   const runningAnsiRenderer = createAnsiStreamRenderer()
   let runningAnsiSource = ""
 
+  const registerTracked = (element: HTMLDivElement | null) => {
+    params.scrollHelpers.registerContainer(element)
+  }
+
+  const registerUntracked = (element: HTMLDivElement | null) => {
+    params.scrollHelpers.registerContainer(element, { disableTracking: true })
+  }
+
   const getMode = () => {
     const version = params.partVersion?.()
     return typeof version === "number" ? String(version) : undefined
@@ -36,6 +44,8 @@ export function createAnsiContentRenderer(params: {
     const cached = cacheHandle.get<AnsiRenderCache>()
     const mode = getMode()
     const isRunningVariant = options.variant === "running"
+    const disableScrollTracking = !isRunningVariant
+    const registerRef = disableScrollTracking ? registerUntracked : registerTracked
 
     let nextCache: AnsiRenderCache
 
@@ -87,9 +97,9 @@ export function createAnsiContentRenderer(params: {
     }
 
     return (
-      <div class={messageClass} ref={params.scrollHelpers.registerContainer} onScroll={params.scrollHelpers.handleScroll}>
+      <div class={messageClass} ref={registerRef} onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}>
-        <pre class="tool-call-content tool-call-ansi" innerHTML={nextCache.html} />
+        <pre class="tool-call-content tool-call-ansi" dir="auto" innerHTML={nextCache.html} />
-        {params.scrollHelpers.renderSentinel()}
+        {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}
       </div>
     )
   }

packages/ui/src/components/tool-call/diagnostics-section.tsx

@@ -42,7 +42,7 @@ export function renderDiagnosticsSection(
                     {entry.displayPath}
                     <span class="tool-call-diagnostic-coords">:L{entry.line || "-"}:C{entry.column || "-"}</span>
                   </span>
-                  <span class="tool-call-diagnostic-message">{entry.message}</span>
+                  <span class="tool-call-diagnostic-message" dir="auto">{entry.message}</span>
                 </div>
               )}
             </For>

packages/ui/src/components/tool-call/diff-render.tsx

@@ -1,11 +1,27 @@
-import type { Accessor, JSXElement } from "solid-js"
+import { Suspense, lazy, onMount, type Accessor, type JSXElement } from "solid-js"
+import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { RenderCache } from "../../types/message"
 import type { DiffViewMode } from "../../stores/preferences"
-import { ToolCallDiffViewer } from "../diff-viewer"
 import type { DiffPayload, DiffRenderOptions, ToolScrollHelpers } from "./types"
 import { getRelativePath } from "./utils"
 import { getCacheEntry } from "../../lib/global-cache"
 
+const LazyToolCallDiffViewer = lazy(() =>
+  import("../diff-viewer").then((module) => ({ default: module.ToolCallDiffViewer })),
+)
+
+function CachedDiffMarkup(props: { html: string; onRendered?: () => void }) {
+  onMount(() => {
+    props.onRendered?.()
+  })
+
+  return (
+    <div class="tool-call-diff-viewer">
+      <div innerHTML={props.html} />
+    </div>
+  )
+}
+
 type CacheHandle = {
   get<T>(): T | undefined
   params(): unknown
@@ -16,6 +32,7 @@ type DiffPrefs = {
 }
 
 export function createDiffContentRenderer(params: {
+  toolState: Accessor<ToolState | undefined>
   preferences: Accessor<DiffPrefs>
   setDiffViewMode: (mode: DiffViewMode) => void
   isDark: Accessor<boolean>
@@ -43,7 +60,10 @@ export function createDiffContentRenderer(params: {
     const cacheHandle = selectedVariant === "permission-diff" ? params.permissionDiffCache : params.diffCache
     const diffMode = () => (params.preferences().diffViewMode || "split") as DiffViewMode
     const themeKey = params.isDark() ? "dark" : "light"
-    const disableScrollTracking = Boolean(options?.disableScrollTracking)
+    const state = params.toolState()
+    const disableScrollTracking = Boolean(
+      options?.disableScrollTracking || (state?.status !== "running" && state?.status !== "pending"),
+    )
     const registerRef = disableScrollTracking ? registerUntracked : registerTracked
 
     const baseEntryParams = cacheHandle.params() as any
@@ -101,15 +121,20 @@ export function createDiffContentRenderer(params: {
             </button>
           </div>
         </div>
-        <ToolCallDiffViewer
+        {cachedHtml ? (
-          diffText={payload.diffText}
+          <CachedDiffMarkup html={cachedHtml} onRendered={handleDiffRendered} />
-          filePath={payload.filePath}
+        ) : (
-          theme={themeKey}
+          <Suspense fallback={<pre class="tool-call-diff-fallback">{payload.diffText}</pre>}>
-          mode={diffMode()}
+            <LazyToolCallDiffViewer
-          cachedHtml={cachedHtml}
+              diffText={payload.diffText}
-          cacheEntryParams={cacheEntryParams as any}
+              filePath={payload.filePath}
-          onRendered={handleDiffRendered}
+              theme={themeKey}
-        />
+              mode={diffMode()}
+              cacheEntryParams={cacheEntryParams as any}
+              onRendered={handleDiffRendered}
+            />
+          </Suspense>
+        )}
         {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}
       </div>
     )

packages/ui/src/components/tool-call/markdown-render.tsx

@@ -31,10 +31,9 @@ export function createMarkdownContentRenderer(params: {
     const size = options.size || "default"
     const disableHighlight = options.disableHighlight || false
     const messageClass = `message-text tool-call-markdown${size === "large" ? " tool-call-markdown-large" : ""}`
-    const disableScrollTracking = options.disableScrollTracking || false
-    const registerRef = disableScrollTracking ? registerUntracked : registerTracked
-
     const state = params.toolState()
+    const disableScrollTracking = options.disableScrollTracking || (state?.status !== "running" && state?.status !== "pending")
+    const registerRef = disableScrollTracking ? registerUntracked : registerTracked
     const shouldDeferMarkdown = Boolean(state && (state.status === "running" || state.status === "pending") && disableHighlight)
     if (shouldDeferMarkdown) {
       return (
@@ -43,7 +42,7 @@ export function createMarkdownContentRenderer(params: {
           ref={registerRef}
           onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
         >
-          <pre class="whitespace-pre-wrap break-words text-sm font-mono">{options.content}</pre>
+          <pre class="whitespace-pre-wrap break-words text-sm font-mono" dir="auto">{options.content}</pre>
           {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}
         </div>
       )

packages/ui/src/components/tool-call/utils.ts

@@ -1,5 +1,5 @@
 import { isRenderableDiffText } from "../../lib/diff-utils"
-import { getLanguageFromPath } from "../../lib/markdown"
+import { getLanguageFromPath } from "../../lib/text-render-utils"
 import type { ToolState } from "@opencode-ai/sdk/v2"
 import type { DiffPayload } from "./types"
 import { getLogger } from "../../lib/logger"

packages/ui/src/lib/i18n/index.tsx

@@ -2,11 +2,6 @@ import { createContext, createEffect, createMemo, createSignal, onCleanup, onMou
 import type { ParentComponent } from "solid-js"
 import { useConfig } from "../../stores/preferences"
 import { enMessages } from "./messages/en"
-import { esMessages } from "./messages/es"
-import { frMessages } from "./messages/fr"
-import { ruMessages } from "./messages/ru"
-import { jaMessages } from "./messages/ja"
-import { zhHansMessages } from "./messages/zh-Hans"
 
 type Messages = Record<string, string>
 
@@ -15,14 +10,18 @@ export type TranslateParams = Record<string, unknown>
 export type Locale = "en" | "es" | "fr" | "ru" | "ja" | "zh-Hans"
 
 const SUPPORTED_LOCALES: readonly Locale[] = ["en", "es", "fr", "ru", "ja", "zh-Hans"] as const
+const SUPPORTED_LOCALES_BY_LOWER = new Map(SUPPORTED_LOCALES.map((locale) => [locale.toLowerCase(), locale]))
 
-const messagesByLocale: Record<Locale, Messages> = {
+const localeMessagesCache = new Map<Locale, Messages>([["en", enMessages]])
-  en: enMessages,
+const localeMessagesPromises = new Map<Locale, Promise<Messages>>()
-  es: esMessages,
+
-  fr: frMessages,
+const localeLoaders: Record<Locale, () => Promise<Messages>> = {
-  ru: ruMessages,
+  en: async () => enMessages,
-  ja: jaMessages,
+  es: async () => (await import("./messages/es")).esMessages,
-  "zh-Hans": zhHansMessages,
+  fr: async () => (await import("./messages/fr")).frMessages,
+  ru: async () => (await import("./messages/ru")).ruMessages,
+  ja: async () => (await import("./messages/ja")).jaMessages,
+  "zh-Hans": async () => (await import("./messages/zh-Hans")).zhHansMessages,
 }
 
 function normalizeLocaleTag(value: string): string {
@@ -34,8 +33,7 @@ function matchSupportedLocale(value: string | undefined): Locale | null {
 
   const normalized = normalizeLocaleTag(value)
   const lower = normalized.toLowerCase()
-  const supportedLower = new Map(SUPPORTED_LOCALES.map((locale) => [locale.toLowerCase(), locale]))
+  const exact = SUPPORTED_LOCALES_BY_LOWER.get(lower)
-  const exact = supportedLower.get(lower)
   if (exact) return exact
 
   const parts = lower.split("-")
@@ -43,11 +41,11 @@ function matchSupportedLocale(value: string | undefined): Locale | null {
   if (!base) return null
 
   if (base === "zh") {
-    const zhHans = supportedLower.get("zh-hans")
+    const zhHans = SUPPORTED_LOCALES_BY_LOWER.get("zh-hans")
     return zhHans ?? null
   }
 
-  const baseMatch = supportedLower.get(base)
+  const baseMatch = SUPPORTED_LOCALES_BY_LOWER.get(base)
   return baseMatch ?? null
 }
 
@@ -84,8 +82,54 @@ function translateFrom(messages: Messages, key: string, params?: TranslateParams
 }
 
 const [globalRevision, setGlobalRevision] = createSignal(0)
-const initialGlobalLocale: Locale = detectNavigatorLocale() ?? "en"
+let globalMessages: Messages = enMessages
-let globalMessages: Messages = messagesByLocale[initialGlobalLocale]
+let globalLocale: Locale = "en"
+
+function getMessagesForLocale(locale: Locale): Messages {
+  return localeMessagesCache.get(locale) ?? enMessages
+}
+
+async function loadLocaleMessages(locale: Locale): Promise<Messages> {
+  const cached = localeMessagesCache.get(locale)
+  if (cached) {
+    return cached
+  }
+
+  const pending = localeMessagesPromises.get(locale)
+  if (pending) {
+    return pending
+  }
+
+  const loader = localeLoaders[locale]
+  const promise = loader()
+    .then((messages) => {
+      localeMessagesCache.set(locale, messages)
+      localeMessagesPromises.delete(locale)
+      return messages
+    })
+    .catch((error) => {
+      localeMessagesPromises.delete(locale)
+      throw error
+    })
+
+  localeMessagesPromises.set(locale, promise)
+  return promise
+}
+
+export async function preloadLocaleMessages(preferredLocale?: string | null): Promise<Locale> {
+  const resolvedLocale = matchSupportedLocale(preferredLocale ?? undefined) ?? detectNavigatorLocale() ?? "en"
+  try {
+    globalMessages = await loadLocaleMessages(resolvedLocale)
+    globalLocale = resolvedLocale
+    setGlobalRevision((value) => value + 1)
+    return resolvedLocale
+  } catch {
+    globalMessages = enMessages
+    globalLocale = "en"
+    setGlobalRevision((value) => value + 1)
+    return "en"
+  }
+}
 
 export function tGlobal(key: string, params?: TranslateParams): string {
   globalRevision()
@@ -101,9 +145,10 @@ const I18nContext = createContext<I18nContextValue>()
 
 export const I18nProvider: ParentComponent = (props) => {
   const { preferences } = useConfig()
-  const [detectedLocale, setDetectedLocale] = createSignal<Locale>("en")
+  const [detectedLocale, setDetectedLocale] = createSignal<Locale>(globalLocale)
-
+  const [resolvedLocale, setResolvedLocale] = createSignal<Locale>(globalLocale)
-  const previousMessages = globalMessages
+  const previousGlobalMessages = globalMessages
+  const previousGlobalLocale = globalLocale
 
   onMount(() => {
     const detected = detectNavigatorLocale()
@@ -115,19 +160,44 @@ export const I18nProvider: ParentComponent = (props) => {
     return configured ?? detectedLocale() ?? "en"
   })
 
-  const messages = createMemo<Messages>(() => messagesByLocale[locale()])
+  const messages = createMemo<Messages>(() => getMessagesForLocale(resolvedLocale()))
 
   function t(key: string, params?: TranslateParams): string {
     return translateFrom(messages(), key, params)
   }
 
   createEffect(() => {
-    globalMessages = messages()
+    const nextLocale = locale()
-    setGlobalRevision((value) => value + 1)
+    let cancelled = false
+
+    void loadLocaleMessages(nextLocale)
+      .then((loadedMessages) => {
+        if (cancelled) {
+          return
+        }
+        setResolvedLocale(nextLocale)
+        globalLocale = nextLocale
+        globalMessages = loadedMessages
+        setGlobalRevision((value) => value + 1)
+      })
+      .catch(() => {
+        if (cancelled) {
+          return
+        }
+        setResolvedLocale("en")
+        globalMessages = enMessages
+        globalLocale = "en"
+        setGlobalRevision((value) => value + 1)
+      })
+
+    onCleanup(() => {
+      cancelled = true
+    })
   })
 
   onCleanup(() => {
-    globalMessages = previousMessages
+    globalMessages = previousGlobalMessages
+    globalLocale = previousGlobalLocale
     setGlobalRevision((value) => value + 1)
   })
 

packages/ui/src/lib/i18n/messages/en/instance.ts

@@ -114,6 +114,10 @@ export const instanceMessages = {
   "instanceShell.sessionChanges.filesChanged": "{count} files changed",
   "instanceShell.sessionChanges.actions.show": "Show changes",
 
+  "instanceShell.gitChanges.loading": "Loading git changes...",
+  "instanceShell.gitChanges.empty": "No git changes yet.",
+  "instanceShell.gitChanges.deleted": "Deleted",
+
   "instanceShell.filesShell.fileListTitle": "File list",
   "instanceShell.filesShell.mobileSelectorLabel": "Select file",
   "instanceShell.filesShell.mobileSelectorEmpty": "Select a file",

packages/ui/src/lib/i18n/messages/es/instance.ts

@@ -90,6 +90,7 @@ export const instanceMessages = {
 
   "instanceShell.rightPanel.title": "Panel de estado",
   "instanceShell.rightPanel.tabs.changes": "Cambios",
+  "instanceShell.rightPanel.tabs.gitChanges": "Cambios de Git",
   "instanceShell.rightPanel.tabs.files": "Archivos",
   "instanceShell.rightPanel.tabs.status": "Estado",
   "instanceShell.rightPanel.tabs.ariaLabel": "Pestañas del panel derecho",
@@ -112,6 +113,10 @@ export const instanceMessages = {
   "instanceShell.sessionChanges.filesChanged": "{count} archivos cambiados",
   "instanceShell.sessionChanges.actions.show": "Mostrar cambios",
 
+  "instanceShell.gitChanges.loading": "Cargando cambios de Git...",
+  "instanceShell.gitChanges.empty": "Aún no hay cambios de Git.",
+  "instanceShell.gitChanges.deleted": "Eliminado",
+
   "instanceShell.filesShell.fileListTitle": "Lista de archivos",
   "instanceShell.filesShell.mobileSelectorLabel": "Seleccionar archivo",
   "instanceShell.filesShell.mobileSelectorEmpty": "Selecciona un archivo",

packages/ui/src/lib/i18n/messages/fr/instance.ts

@@ -90,6 +90,7 @@ export const instanceMessages = {
 
   "instanceShell.rightPanel.title": "Panneau d'état",
   "instanceShell.rightPanel.tabs.changes": "Modifications",
+  "instanceShell.rightPanel.tabs.gitChanges": "Changements Git",
   "instanceShell.rightPanel.tabs.files": "Fichiers",
   "instanceShell.rightPanel.tabs.status": "Statut",
   "instanceShell.rightPanel.tabs.ariaLabel": "Onglets du panneau droit",
@@ -112,6 +113,10 @@ export const instanceMessages = {
   "instanceShell.sessionChanges.filesChanged": "{count} fichiers modifiés",
   "instanceShell.sessionChanges.actions.show": "Afficher les changements",
 
+  "instanceShell.gitChanges.loading": "Chargement des changements Git...",
+  "instanceShell.gitChanges.empty": "Aucun changement Git pour l'instant.",
+  "instanceShell.gitChanges.deleted": "Supprimé",
+
   "instanceShell.filesShell.fileListTitle": "Liste des fichiers",
   "instanceShell.filesShell.mobileSelectorLabel": "Sélectionner un fichier",
   "instanceShell.filesShell.mobileSelectorEmpty": "Sélectionnez un fichier",

packages/ui/src/lib/i18n/messages/ja/instance.ts

@@ -90,6 +90,7 @@ export const instanceMessages = {
 
   "instanceShell.rightPanel.title": "ステータスパネル",
   "instanceShell.rightPanel.tabs.changes": "変更",
+  "instanceShell.rightPanel.tabs.gitChanges": "Git 変更",
   "instanceShell.rightPanel.tabs.files": "ファイル",
   "instanceShell.rightPanel.tabs.status": "ステータス",
   "instanceShell.rightPanel.tabs.ariaLabel": "右パネルのタブ",
@@ -112,6 +113,10 @@ export const instanceMessages = {
   "instanceShell.sessionChanges.filesChanged": "{count} 個のファイルが変更されました",
   "instanceShell.sessionChanges.actions.show": "変更を表示",
 
+  "instanceShell.gitChanges.loading": "Git の変更を読み込み中...",
+  "instanceShell.gitChanges.empty": "Git の変更はまだありません。",
+  "instanceShell.gitChanges.deleted": "削除済み",
+
   "instanceShell.filesShell.fileListTitle": "ファイル一覧",
   "instanceShell.filesShell.mobileSelectorLabel": "ファイルを選択",
   "instanceShell.filesShell.mobileSelectorEmpty": "ファイルを選択してください",

packages/ui/src/lib/i18n/messages/ru/instance.ts

@@ -90,6 +90,7 @@ export const instanceMessages = {
 
   "instanceShell.rightPanel.title": "Панель состояния",
   "instanceShell.rightPanel.tabs.changes": "Изменения",
+  "instanceShell.rightPanel.tabs.gitChanges": "Изменения Git",
   "instanceShell.rightPanel.tabs.files": "Файлы",
   "instanceShell.rightPanel.tabs.status": "Статус",
   "instanceShell.rightPanel.tabs.ariaLabel": "Вкладки правой панели",
@@ -112,6 +113,10 @@ export const instanceMessages = {
   "instanceShell.sessionChanges.filesChanged": "Изменено файлов: {count}",
   "instanceShell.sessionChanges.actions.show": "Показать изменения",
 
+  "instanceShell.gitChanges.loading": "Загрузка изменений Git...",
+  "instanceShell.gitChanges.empty": "Изменений Git пока нет.",
+  "instanceShell.gitChanges.deleted": "Удалено",
+
   "instanceShell.filesShell.fileListTitle": "Список файлов",
   "instanceShell.filesShell.mobileSelectorLabel": "Выбрать файл",
   "instanceShell.filesShell.mobileSelectorEmpty": "Выберите файл",

packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts

@@ -90,6 +90,7 @@ export const instanceMessages = {
 
   "instanceShell.rightPanel.title": "状态面板",
   "instanceShell.rightPanel.tabs.changes": "更改",
+  "instanceShell.rightPanel.tabs.gitChanges": "Git 更改",
   "instanceShell.rightPanel.tabs.files": "文件",
   "instanceShell.rightPanel.tabs.status": "状态",
   "instanceShell.rightPanel.tabs.ariaLabel": "右侧面板标签页",
@@ -112,6 +113,10 @@ export const instanceMessages = {
   "instanceShell.sessionChanges.filesChanged": "已更改 {count} 个文件",
   "instanceShell.sessionChanges.actions.show": "显示更改",
 
+  "instanceShell.gitChanges.loading": "正在加载 Git 更改...",
+  "instanceShell.gitChanges.empty": "暂无 Git 更改。",
+  "instanceShell.gitChanges.deleted": "已删除",
+
   "instanceShell.filesShell.fileListTitle": "文件列表",
   "instanceShell.filesShell.mobileSelectorLabel": "选择文件",
   "instanceShell.filesShell.mobileSelectorEmpty": "请选择文件",

packages/ui/src/lib/markdown.ts

@@ -1,7 +1,8 @@
 import { marked } from "marked"
-import { createHighlighter, type Highlighter, bundledLanguages } from "shiki/bundle/full"
 import { getLogger } from "./logger"
 import { tGlobal } from "./i18n"
+import type { Highlighter } from "shiki/bundle/full"
+import { decodeHtmlEntities, escapeHtml } from "./text-render-utils"
 
 const log = getLogger("actions")
 
@@ -11,43 +12,8 @@ let currentTheme: "light" | "dark" = "light"
 let isInitialized = false
 let highlightSuppressed = false
 let rendererSetup = false
-
+let shikiModulePromise: Promise<typeof import("shiki/bundle/full")> | null = null
-const extensionToLanguage: Record<string, string> = {
+let bundledLanguagesCache: typeof import("shiki/bundle/full")["bundledLanguages"] | null = null
-  ts: "typescript",
-  tsx: "typescript",
-  js: "javascript",
-  jsx: "javascript",
-  py: "python",
-  sh: "bash",
-  bash: "bash",
-  json: "json",
-  html: "html",
-  css: "css",
-  md: "markdown",
-  yaml: "yaml",
-  yml: "yaml",
-  sql: "sql",
-  rs: "rust",
-  go: "go",
-  cpp: "cpp",
-  cc: "cpp",
-  cxx: "cpp",
-  hpp: "cpp",
-  h: "cpp",
-  c: "c",
-  java: "java",
-  cs: "csharp",
-  php: "php",
-  rb: "ruby",
-  swift: "swift",
-  kt: "kotlin",
-}
-
-export function getLanguageFromPath(path?: string | null): string | undefined {
-  if (!path) return undefined
-  const ext = path.split(".").pop()?.toLowerCase()
-  return ext ? extensionToLanguage[ext] : undefined
-}
 
 // Track loaded languages and queue for on-demand loading
 const loadedLanguages = new Set<string>()
@@ -89,10 +55,15 @@ async function getOrCreateHighlighter() {
     return highlighterPromise
   }
 
-  // Create highlighter with no preloaded languages
+  highlighterPromise = (async () => {
-  highlighterPromise = createHighlighter({
+    const shiki = await loadShikiModule()
-    themes: ["github-light", "github-light-high-contrast", "github-dark"],
+    return shiki.createHighlighter({
-    langs: [],
+      themes: ["github-light", "github-light-high-contrast", "github-dark"],
+      langs: [],
+    })
+  })().catch((error) => {
+    highlighterPromise = null
+    throw error
   })
 
   highlighter = await highlighterPromise
@@ -100,12 +71,37 @@ async function getOrCreateHighlighter() {
   return highlighter
 }
 
+async function loadShikiModule() {
+  if (!shikiModulePromise) {
+    shikiModulePromise = import("shiki/bundle/full").then((module) => {
+      bundledLanguagesCache = module.bundledLanguages
+      return module
+    })
+  }
+
+  return shikiModulePromise
+}
+
+function queueHighlighterWarmup() {
+  if (highlighter || highlighterPromise) {
+    return
+  }
+
+  void getOrCreateHighlighter().catch((error) => {
+    log.warn("Failed to initialize markdown highlighter", error)
+  })
+}
+
 function normalizeLanguageToken(token: string): string {
   return token.trim().toLowerCase()
 }
 
 function resolveLanguage(token: string): { canonical: string | null; raw: string } {
   const normalized = normalizeLanguageToken(token)
+  const bundledLanguages = bundledLanguagesCache
+  if (!bundledLanguages) {
+    return { canonical: null, raw: normalized }
+  }
 
   // Check if it's a direct key match
   if (normalized in bundledLanguages) {
@@ -148,32 +144,43 @@ async function ensureLanguages(content: string) {
 
   // Queue language loading tasks
   for (const token of foundLanguages) {
-    const { canonical, raw } = resolveLanguage(token)
+    const rawToken = normalizeLanguageToken(token)
-    const langKey = canonical || raw
+    if (!rawToken) {
+      continue
+    }
 
     // Skip "text" and aliases since Shiki handles plain text already
-    if (langKey === "text" || raw === "text") {
+    if (rawToken === "text") {
       continue
     }
 
     // Skip if already loaded or queued
-    if (loadedLanguages.has(langKey) || queuedLanguages.has(langKey)) {
+    if (loadedLanguages.has(rawToken) || queuedLanguages.has(rawToken)) {
       continue
     }
 
-    queuedLanguages.add(langKey)
+    queuedLanguages.add(rawToken)
 
     // Queue the language loading task
     languageLoadQueue.push(async () => {
       try {
+        await loadShikiModule()
+        const { canonical, raw } = resolveLanguage(token)
+        const langKey = canonical || raw
+
+        if (langKey === "text" || raw === "text") {
+          return
+        }
+
         const h = await getOrCreateHighlighter()
         await h.loadLanguage(langKey as never)
         loadedLanguages.add(langKey)
+        loadedLanguages.add(raw)
         triggerLanguageListeners()
       } catch {
         // Quietly ignore errors
       } finally {
-        queuedLanguages.delete(langKey)
+        queuedLanguages.delete(rawToken)
       }
     })
   }
@@ -184,52 +191,6 @@ async function ensureLanguages(content: string) {
   }
 }
 
-export function decodeHtmlEntities(content: string): string {
-  if (!content.includes("&")) {
-    return content
-  }
-
-  const entityPattern = /&(#x?[0-9a-fA-F]+|[a-zA-Z][a-zA-Z0-9]+);/g
-  const namedEntities: Record<string, string> = {
-    amp: "&",
-    lt: "<",
-    gt: ">",
-    quot: '"',
-    apos: "'",
-    nbsp: " ",
-  }
-
-  let result = content
-  let previous = ""
-
-  while (result.includes("&") && result !== previous) {
-    previous = result
-    result = result.replace(entityPattern, (match, entity) => {
-      if (!entity) {
-        return match
-      }
-
-      if (entity[0] === "#") {
-        const isHex = entity[1]?.toLowerCase() === "x"
-        const value = isHex ? parseInt(entity.slice(2), 16) : parseInt(entity.slice(1), 10)
-        if (!Number.isNaN(value)) {
-          try {
-            return String.fromCodePoint(value)
-          } catch {
-            return match
-          }
-        }
-        return match
-      }
-
-      const decoded = namedEntities[entity.toLowerCase()]
-      return decoded !== undefined ? decoded : match
-    })
-  }
-
-  return result
-}
-
 async function runLanguageLoadQueue() {
   if (isQueueRunning || languageLoadQueue.length === 0) {
     return
@@ -249,7 +210,6 @@ async function runLanguageLoadQueue() {
 
 function setupRenderer(isDark: boolean) {
   currentTheme = isDark ? "dark" : "light"
-  if (!highlighter) return
   if (rendererSetup) return
 
   marked.setOptions({
@@ -330,8 +290,9 @@ function setupRenderer(isDark: boolean) {
 }
 
 export async function initMarkdown(isDark: boolean) {
-  await getOrCreateHighlighter()
   setupRenderer(isDark)
+  queueHighlighterWarmup()
+  await getOrCreateHighlighter()
   isInitialized = true
 }
 
@@ -350,15 +311,16 @@ export async function renderMarkdown(
   },
 ): Promise<string> {
   if (!isInitialized) {
-    await initMarkdown(currentTheme === "dark")
+    setupRenderer(currentTheme === "dark")
+    isInitialized = true
   }
 
   const suppressHighlight = options?.suppressHighlight ?? false
   const decoded = decodeHtmlEntities(content)
 
   if (!suppressHighlight) {
-    // Queue language loading but don't wait for it to complete
+    queueHighlighterWarmup()
-    await ensureLanguages(decoded)
+    void ensureLanguages(decoded)
   }
 
   const previousSuppressed = highlightSuppressed
@@ -375,13 +337,3 @@ export async function renderMarkdown(
 export async function getSharedHighlighter(): Promise<Highlighter> {
   return getOrCreateHighlighter()
 }
-
-export function escapeHtml(text: string): string {
-  const map: Record<string, string> = {
-    "&": "&amp;",
-    "<": "&lt;",
-    '"': "&quot;",
-    "'": "&#039;",
-  }
-  return text.replace(/[&<"']/g, (m) => map[m])
-}

packages/ui/src/lib/text-render-utils.ts

@@ -0,0 +1,92 @@
+const extensionToLanguage: Record<string, string> = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  py: "python",
+  sh: "bash",
+  bash: "bash",
+  json: "json",
+  html: "html",
+  css: "css",
+  md: "markdown",
+  yaml: "yaml",
+  yml: "yaml",
+  sql: "sql",
+  rs: "rust",
+  go: "go",
+  cpp: "cpp",
+  cc: "cpp",
+  cxx: "cpp",
+  hpp: "cpp",
+  h: "cpp",
+  c: "c",
+  java: "java",
+  cs: "csharp",
+  php: "php",
+  rb: "ruby",
+  swift: "swift",
+  kt: "kotlin",
+}
+
+export function getLanguageFromPath(path?: string | null): string | undefined {
+  if (!path) return undefined
+  const ext = path.split(".").pop()?.toLowerCase()
+  return ext ? extensionToLanguage[ext] : undefined
+}
+
+export function decodeHtmlEntities(content: string): string {
+  if (!content.includes("&")) {
+    return content
+  }
+
+  const entityPattern = /&(#x?[0-9a-fA-F]+|[a-zA-Z][a-zA-Z0-9]+);/g
+  const namedEntities: Record<string, string> = {
+    amp: "&",
+    lt: "<",
+    gt: ">",
+    quot: '"',
+    apos: "'",
+    nbsp: " ",
+  }
+
+  let result = content
+  let previous = ""
+
+  while (result.includes("&") && result !== previous) {
+    previous = result
+    result = result.replace(entityPattern, (match, entity) => {
+      if (!entity) {
+        return match
+      }
+
+      if (entity[0] === "#") {
+        const isHex = entity[1]?.toLowerCase() === "x"
+        const value = isHex ? parseInt(entity.slice(2), 16) : parseInt(entity.slice(1), 10)
+        if (!Number.isNaN(value)) {
+          try {
+            return String.fromCodePoint(value)
+          } catch {
+            return match
+          }
+        }
+        return match
+      }
+
+      const decoded = namedEntities[entity.toLowerCase()]
+      return decoded !== undefined ? decoded : match
+    })
+  }
+
+  return result
+}
+
+export function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    '"': "&quot;",
+    "'": "&#039;",
+  }
+  return text.replace(/[&<"']/g, (match) => map[match])
+}

packages/ui/src/main.tsx

@@ -4,7 +4,7 @@ import { ThemeProvider } from "./lib/theme"
 import { ConfigProvider } from "./stores/preferences"
 import { InstanceConfigProvider } from "./stores/instance-config"
 import { runtimeEnv } from "./lib/runtime-env"
-import { I18nProvider } from "./lib/i18n"
+import { I18nProvider, preloadLocaleMessages } from "./lib/i18n"
 import { storage } from "./lib/storage"
 import "./index.css"
 import "@git-diff-view/solid/styles/diff-view-pure.css"
@@ -31,15 +31,19 @@ async function bootstrap() {
 
     try {
       const uiConfig = await storage.loadConfigOwner("ui")
-      const theme = (uiConfig as any)?.theme ?? "system"
+      const theme = (uiConfig as any)?.theme
+      const locale = typeof (uiConfig as any)?.settings?.locale === "string" ? (uiConfig as any).settings.locale : undefined
 
-      if (theme === "system") {
+      if (theme === "light" || theme === "dark") {
-        document.documentElement.removeAttribute("data-theme")
-      } else {
         document.documentElement.setAttribute("data-theme", theme)
+      } else {
+        document.documentElement.removeAttribute("data-theme")
       }
+
+      await preloadLocaleMessages(locale)
     } catch {
       // If config fails to load, fall back to CSS defaults.
+      await preloadLocaleMessages()
     }
   }
 

packages/ui/src/stores/message-v2/normalizers.ts

@@ -1,4 +1,4 @@
-import { decodeHtmlEntities } from "../../lib/markdown"
+import { decodeHtmlEntities } from "../../lib/text-render-utils"
 
 function decodeTextSegment(segment: any): any {
   if (typeof segment === "string") {

packages/ui/src/styles/markdown.css

@@ -24,6 +24,21 @@
     color: inherit;
   }
 
+  /* Auto-detect text direction per block element for RTL language support (e.g. Hebrew, Arabic) */
+  .markdown-body p,
+  .markdown-body li,
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6,
+  .markdown-body blockquote,
+  .markdown-body td,
+  .markdown-body th {
+    unicode-bidi: plaintext;
+  }
+
   .markdown-body h1,
   .markdown-body h2,
   .markdown-body h3,
@@ -129,16 +144,19 @@
   }
 
   .markdown-body blockquote {
-    border-left: 3px solid var(--border-base);
+    border-inline-start: 3px solid var(--border-base);
     color: var(--text-secondary);
     background-color: var(--surface-muted);
     padding: 0.5rem 1rem;
-    border-radius: 0 8px 8px 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 8px;
+    border-end-end-radius: 8px;
+    border-end-start-radius: 0;
   }
 
   .markdown-body ul,
   .markdown-body ol {
-    padding-left: 1.5rem;
+    padding-inline-start: 1.5rem;
     margin: 0.5rem 0;
   }
 
@@ -166,7 +184,7 @@
   .markdown-body td {
     border: 1px solid var(--border-base);
     padding: 0.5rem 0.75rem;
-    text-align: left;
+    text-align: start;
     color: var(--text-primary);
     background-color: transparent;
   }
@@ -221,7 +239,7 @@
     cursor: pointer;
     color: var(--text-secondary);
     transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
-    margin-left: auto;
+    margin-inline-start: auto;
     font-size: var(--font-size-sm);
   }
 

packages/ui/src/styles/messaging/message-base.css

@@ -132,6 +132,13 @@
   margin-bottom: 0;
 }
 
+.message-stream-block {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 2px;
+}
+
 .message-step-start {
   background-color: var(--message-assistant-bg);
   border-left: 4px solid var(--message-assistant-border);

packages/ui/vite.config.ts

@@ -134,6 +134,34 @@ export default defineConfig({
         main: resolve(__dirname, "./src/renderer/index.html"),
         loading: resolve(__dirname, "./src/renderer/loading.html"),
       },
+      output: {
+        manualChunks(id) {
+          const normalizedId = id.replace(/\\/g, "/")
+
+          if (normalizedId.includes("/node_modules/@git-diff-view/")) {
+            return "git-diff-vendor"
+          }
+
+          if (normalizedId.includes("/node_modules/highlight.js/") || normalizedId.includes("/node_modules/lowlight/")) {
+            return "highlight-vendor"
+          }
+
+          if (normalizedId.includes("/node_modules/fast-diff/")) {
+            return "fast-diff-vendor"
+          }
+
+          if (normalizedId.includes("/node_modules/monaco-editor/")) {
+            return "monaco-vendor"
+          }
+
+          if (
+            normalizedId.includes("/src/components/file-viewer/") ||
+            normalizedId.includes("/src/lib/monaco/")
+          ) {
+            return "monaco-viewer"
+          }
+        },
+      },
     },
   },
 })