Add navigation message tracking to browser extension

- Add onBeforeSend callback to ChatPanel and AgentInterface
- Add onBeforeToolCall callback (for future permission dialogs)
- Create NavigationMessage custom message type
- Add browserMessageTransformer that converts nav messages to <system> tags
- Track last submitted URL and tab index
- Auto-insert navigation message when URL/tab changes on user submit
- Navigation message shows favicon + page title in UI
- LLM receives: <system>Navigated to [title] (tab X): [url]</system>

packages/web-ui/src/ChatPanel.ts

@@ -22,6 +22,7 @@ export class ChatPanel extends LitElement {
 	@state() private windowWidth = window.innerWidth;
 	@property({ attribute: false }) sandboxUrlProvider?: () => string;
 	@property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise<boolean>;
+	@property({ attribute: false }) onBeforeSend?: () => void | Promise<void>;
 	@property({ attribute: false }) additionalTools?: any[];
 
 	private resizeHandler = () => {
@@ -58,6 +59,7 @@ export class ChatPanel extends LitElement {
 		this.agentInterface.enableThinkingSelector = true;
 		this.agentInterface.showThemeToggle = false;
 		this.agentInterface.onApiKeyRequired = this.onApiKeyRequired;
+		this.agentInterface.onBeforeSend = this.onBeforeSend;
 
 		// Create JavaScript REPL tool
 		const javascriptReplTool = createJavaScriptReplTool();