diff --git a/packages/browser-extension/src/sidepanel.ts b/packages/browser-extension/src/sidepanel.ts index a52f822e..526f8f9c 100644 --- a/packages/browser-extension/src/sidepanel.ts +++ b/packages/browser-extension/src/sidepanel.ts @@ -71,10 +71,6 @@ let agent: Agent; let chatPanel: ChatPanel; let agentUnsubscribe: (() => void) | undefined; -// Track current active tab for real-time navigation updates -let currentTabUrl: string | undefined; -let currentTabIndex: number | undefined; - // ============================================================================ // HELPERS // ============================================================================ @@ -302,7 +298,8 @@ const renderApp = () => { // Listen for tab updates and insert navigation messages immediately chrome.tabs.onUpdated.addListener((_tabId, changeInfo, tab) => { // Only care about URL changes on the active tab - if (changeInfo.url && tab.active && tab.url && agent) { + // Ignore chrome-extension:// URLs (extension internal pages) + if (changeInfo.url && tab.active && tab.url && agent && !tab.url.startsWith("chrome-extension://")) { const navMessage = createNavigationMessage(tab.url, tab.title || "Untitled", tab.favIconUrl, tab.index); agent.appendMessage(navMessage); } @@ -311,7 +308,8 @@ chrome.tabs.onUpdated.addListener((_tabId, changeInfo, tab) => { // Listen for tab activation (user switches tabs) chrome.tabs.onActivated.addListener(async (activeInfo) => { const tab = await chrome.tabs.get(activeInfo.tabId); - if (tab.url && agent) { + // Ignore chrome-extension:// URLs (extension internal pages) + if (tab.url && agent && !tab.url.startsWith("chrome-extension://")) { const navMessage = createNavigationMessage(tab.url, tab.title || "Untitled", tab.favIconUrl, tab.index); agent.appendMessage(navMessage); } @@ -345,13 +343,6 @@ async function initApp() { }; chatPanel.additionalTools = [browserJavaScriptTool]; - // Initialize current tab state - const [currentTab] = await chrome.tabs.query({ active: true, currentWindow: true }); - if (currentTab?.url) { - currentTabUrl = currentTab.url; - currentTabIndex = currentTab.index; - } - // Check for session in URL const urlParams = new URLSearchParams(window.location.search); let sessionIdFromUrl = urlParams.get("session"); diff --git a/packages/web-ui/src/ChatPanel.ts b/packages/web-ui/src/ChatPanel.ts index c461dd92..8715011a 100644 --- a/packages/web-ui/src/ChatPanel.ts +++ b/packages/web-ui/src/ChatPanel.ts @@ -19,7 +19,7 @@ export class ChatPanel extends LitElement { @state() private hasArtifacts = false; @state() private artifactCount = 0; @state() private showArtifactsPanel = false; - @state() private windowWidth = window.innerWidth; + @state() private windowWidth = 0; @property({ attribute: false }) sandboxUrlProvider?: () => string; @property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise; @property({ attribute: false }) onBeforeSend?: () => void | Promise; @@ -36,11 +36,17 @@ export class ChatPanel extends LitElement { override connectedCallback() { super.connectedCallback(); + this.windowWidth = window.innerWidth; // Set initial width after connection window.addEventListener("resize", this.resizeHandler); this.style.display = "flex"; this.style.flexDirection = "column"; this.style.height = "100%"; this.style.minHeight = "0"; + // Update width after initial render + requestAnimationFrame(() => { + this.windowWidth = window.innerWidth; + this.requestUpdate(); + }); } override disconnectedCallback() { @@ -146,6 +152,15 @@ export class ChatPanel extends LitElement { const isMobile = this.windowWidth < BREAKPOINT; + console.log("[ChatPanel Debug]", { + windowWidth: this.windowWidth, + breakpoint: BREAKPOINT, + isMobile, + showArtifactsPanel: this.showArtifactsPanel, + hasArtifacts: this.hasArtifacts, + artifactCount: this.artifactCount, + }); + // Set panel props if (this.artifactsPanel) { this.artifactsPanel.collapsed = !this.showArtifactsPanel;