From 417ef0003245df49ab4e6e837309a6cd4c41277d Mon Sep 17 00:00:00 2001
From: SWangHash <88996709+SWangHash@users.noreply.github.com>
Date: Wed, 17 Jun 2026 15:03:05 +0800
Subject: [PATCH 1/2] fix(browser): fallback to iframe when webview API
 unavailable on OHOS

OHOS platform does not support embedded webview creation via Tauri API.
Added automatic fallback to iframe mode when webview API is detected as
unavailable, allowing browser scene and panel to work on OHOS.
---
 .../src/app/scenes/browser/BrowserPanel.tsx   | 27 +++++++++++++++----
 .../src/app/scenes/browser/BrowserScene.tsx   | 27 +++++++++++++++----
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx b/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
index 30b920a719..d9bb56cade 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
+++ b/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
@@ -70,6 +70,17 @@ function isWebviewNotFoundError(error: unknown): boolean {
   return formatUnknownError(error).toLowerCase().includes('webview not found');
 }
 
+function isWebviewApiUnavailable(error: unknown): boolean {
+  const message = formatUnknownError(error);
+  const lowered = message.toLowerCase();
+  return (
+    lowered.includes('webview api not available') ||
+    lowered.includes('webview is not supported') ||
+    lowered.includes('webview unavailable') ||
+    lowered.includes('no webview')
+  );
+}
+
 async function waitForWebviewCreated(handle: BrowserWebviewHandle): Promise<void> {
   await new Promise<void>((resolve, reject) => {
     let settled = false;
@@ -135,6 +146,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [isInspectorActive, setIsInspectorActive] = useState(false);
+  const [webviewUnavailable, setWebviewUnavailable] = useState(false);
 
   const addContext = useContextStore((s) => s.addContext);
 
@@ -278,9 +290,14 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
           .catch(() => {});
       }, 500);
     } catch (loadError) {
-      const message = formatUnknownError(loadError);
-      log.error('Load browser panel url failed', loadError);
-      setError(message);
+      if (isWebviewApiUnavailable(loadError)) {
+        log.warn('Webview API not available, falling back to iframe');
+        setWebviewUnavailable(true);
+      } else {
+        const message = formatUnknownError(loadError);
+        log.error('Load browser panel url failed', loadError);
+        setError(message);
+      }
     } finally {
       setIsLoading(false);
     }
@@ -296,7 +313,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
 
   // Activate / deactivate webview based on shouldShowWebview
   useEffect(() => {
-    if (!isTauri) return;
+    if (!isTauri || webviewUnavailable) return;
 
     if (shouldShowWebview) {
       if (!webviewRef.current) {
@@ -565,7 +582,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
       ) : null}
 
       <div className="browser-panel__content">
-        {!isTauri ? (
+        {!isTauri || webviewUnavailable ? (
           <iframe
             className="browser-panel__iframe"
             src={currentUrl}
diff --git a/src/web-ui/src/app/scenes/browser/BrowserScene.tsx b/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
index ab2c9c08c7..dc11e0636a 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
+++ b/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
@@ -71,6 +71,17 @@ function isWebviewNotFoundError(error: unknown): boolean {
   return message.toLowerCase().includes('webview not found');
 }
 
+function isWebviewApiUnavailable(error: unknown): boolean {
+  const message = formatUnknownError(error);
+  const lowered = message.toLowerCase();
+  return (
+    lowered.includes('webview api not available') ||
+    lowered.includes('webview is not supported') ||
+    lowered.includes('webview unavailable') ||
+    lowered.includes('no webview')
+  );
+}
+
 async function evalWebview(label: string, script: string): Promise<void> {
   const { invoke } = await import('@tauri-apps/api/core');
   await invoke('browser_webview_eval', { request: { label, script } });
@@ -152,6 +163,7 @@ const BrowserScene: React.FC = () => {
   const [currentUrl, setCurrentUrl] = useState(DEFAULT_URL);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [webviewUnavailable, setWebviewUnavailable] = useState(false);
 
   const syncWebviewBounds = useCallback(async (handle?: BrowserWebviewHandle | null) => {
     const target = handle ?? webviewRef.current;
@@ -295,9 +307,14 @@ const BrowserScene: React.FC = () => {
           .catch(() => {});
       }, 500);
     } catch (loadError) {
-      const message = formatUnknownError(loadError);
-      log.error('Load browser url failed', loadError);
-      setError(message);
+      if (isWebviewApiUnavailable(loadError)) {
+        log.warn('Webview API not available, falling back to iframe');
+        setWebviewUnavailable(true);
+      } else {
+        const message = formatUnknownError(loadError);
+        log.error('Load browser url failed', loadError);
+        setError(message);
+      }
     } finally {
       setIsLoading(false);
     }
@@ -316,7 +333,7 @@ const BrowserScene: React.FC = () => {
   }, [syncWebviewBounds]);
 
   useEffect(() => {
-    if (!isTauri) {
+    if (!isTauri || webviewUnavailable) {
       return;
     }
 
@@ -510,7 +527,7 @@ const BrowserScene: React.FC = () => {
       ) : null}
 
       <div className="browser-scene__content">
-        {!isTauri ? (
+        {!isTauri || webviewUnavailable ? (
           <iframe
             className="browser-scene__iframe"
             src={currentUrl}

From 0b3ac5eb1e4795b836a9cba234afe8c5dcb9afe9 Mon Sep 17 00:00:00 2001
From: SWangHash <88996709+SWangHash@users.noreply.github.com>
Date: Wed, 17 Jun 2026 15:30:27 +0800
Subject: [PATCH 2/2] fix(browser): skip webview creation when already
 unavailable

When webviewUnavailable is set, loadUrl should skip webview creation
attempt and let iframe handle URL navigation directly.
---
 src/web-ui/src/app/scenes/browser/BrowserPanel.tsx | 4 ++--
 src/web-ui/src/app/scenes/browser/BrowserScene.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx b/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
index d9bb56cade..b82fc81be0 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
+++ b/src/web-ui/src/app/scenes/browser/BrowserPanel.tsx
@@ -251,7 +251,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
     }
     setIsInspectorActive(false);
 
-    if (!isTauri) {
+    if (!isTauri || webviewUnavailable) {
       setIsLoading(false);
       return;
     }
@@ -301,7 +301,7 @@ const BrowserPanel: React.FC<BrowserPanelProps> = ({ isActive, initialUrl }) =>
     } finally {
       setIsLoading(false);
     }
-  }, [isTauri, recreateWebview, shouldShowWebview, syncWebviewBounds]);
+  }, [isTauri, recreateWebview, shouldShowWebview, syncWebviewBounds, webviewUnavailable]);
 
   const queueSync = useCallback(() => {
     if (resizeFrameRef.current !== null) window.cancelAnimationFrame(resizeFrameRef.current);
diff --git a/src/web-ui/src/app/scenes/browser/BrowserScene.tsx b/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
index dc11e0636a..098154be0f 100644
--- a/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
+++ b/src/web-ui/src/app/scenes/browser/BrowserScene.tsx
@@ -268,7 +268,7 @@ const BrowserScene: React.FC = () => {
     setError(null);
     setIsLoading(true);
 
-    if (!isTauri) {
+    if (!isTauri || webviewUnavailable) {
       setIsLoading(false);
       return;
     }
@@ -318,7 +318,7 @@ const BrowserScene: React.FC = () => {
     } finally {
       setIsLoading(false);
     }
-  }, [isActive, isTauri, recreateWebview, syncWebviewBounds]);
+  }, [isActive, isTauri, recreateWebview, syncWebviewBounds, webviewUnavailable]);
 
   const queueSync = useCallback(() => {
     if (resizeFrameRef.current !== null) {