Fix navigation tracking and ChatPanel window width initialization

Navigation tracking fixes:
- Filter out chrome-extension:// URLs to avoid triggering on extension internal pages
- Fixes "Could not establish connection" errors when sidepanel URL updates
- Remove unused currentTabUrl/currentTabIndex tracking variables

ChatPanel layout fixes:
- Fix windowWidth initialization (was 0 due to too-early evaluation)
- Set windowWidth in connectedCallback after DOM connection
- Add requestAnimationFrame to ensure width is measured after layout
- Add debug logging for troubleshooting layout issues
- Now properly respects BREAKPOINT (800px) for mobile vs desktop layout

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");

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<boolean>;
 	@property({ attribute: false }) onBeforeSend?: () => void | Promise<void>;
@@ -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;