From 19dd1aab404821aa18053c1eea39eb8123478985 Mon Sep 17 00:00:00 2001
From: Zero Liu <zerolxy@gmail.com>
Date: Fri, 15 May 2026 10:58:01 -0700
Subject: [PATCH] fix(quick-ask): provide AppContext to overlay panel (#2466)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Quick Ask overlay creates its own React root, so descendants that
call useApp() (AtMentionCommandPlugin → useAtMentionSearch →
useOpenWebTabs) crashed with "useApp() called outside of an
<AppContext.Provider>" when opening the panel.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/quick-ask/QuickAskOverlay.tsx | 25 +++++++++++---------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/quick-ask/QuickAskOverlay.tsx b/src/components/quick-ask/QuickAskOverlay.tsx
index 05e5d516..03058ee7 100644
--- a/src/components/quick-ask/QuickAskOverlay.tsx
+++ b/src/components/quick-ask/QuickAskOverlay.tsx
@@ -12,6 +12,7 @@ import React from "react";
 import { createRoot, Root } from "react-dom/client";
 import { updateDynamicStyleClass, clearDynamicStyleClass } from "@/utils/dom/dynamicStyleManager";
 import { QuickAskPanel } from "./QuickAskPanel";
+import { AppContext } from "@/context";
 import type CopilotPlugin from "@/main";
 import type { ReplaceGuard } from "@/editor/replaceGuard";
 import type { ResizeDirection } from "@/hooks/use-resizable";
@@ -239,17 +240,19 @@ export class QuickAskOverlay {
     }
 
     this.root.render(
-      <QuickAskPanel
-        plugin={this.options.plugin}
-        editor={this.options.editor}
-        view={this.options.view}
-        selectedText={this.options.selectedText}
-        replaceGuard={this.options.replaceGuard}
-        onClose={this.closeWithAnimation}
-        onDragOffset={this.handleDragOffset}
-        onResizeStart={this.handleResizeStart}
-        hasCustomHeight={this.hasUserResizedHeight}
-      />
+      <AppContext.Provider value={this.options.plugin.app}>
+        <QuickAskPanel
+          plugin={this.options.plugin}
+          editor={this.options.editor}
+          view={this.options.view}
+          selectedText={this.options.selectedText}
+          replaceGuard={this.options.replaceGuard}
+          onClose={this.closeWithAnimation}
+          onDragOffset={this.handleDragOffset}
+          onResizeStart={this.handleResizeStart}
+          hasCustomHeight={this.hasUserResizedHeight}
+        />
+      </AppContext.Provider>
     );
   }