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

packages/web-ui/src/components/AgentInterface.ts

@@ -25,6 +25,10 @@ export class AgentInterface extends LitElement {
 	@property() showThemeToggle = false;
 	// Optional custom API key prompt handler - if not provided, uses default dialog
 	@property({ attribute: false }) onApiKeyRequired?: (provider: string) => Promise<boolean>;
+	// Optional callback called before sending a message
+	@property({ attribute: false }) onBeforeSend?: () => void | Promise<void>;
+	// Optional callback called before executing a tool call - return false to prevent execution
+	@property({ attribute: false }) onBeforeToolCall?: (toolName: string, args: any) => boolean | Promise<boolean>;
 
 	// References
 	@query("message-editor") private _messageEditor!: MessageEditor;
@@ -186,6 +190,11 @@ export class AgentInterface extends LitElement {
 			}
 		}
 
+		// Call onBeforeSend hook before sending
+		if (this.onBeforeSend) {
+			await this.onBeforeSend();
+		}
+
 		// Only clear editor after we know we can send
 		this._messageEditor.value = "";
 		this._messageEditor.attachments = [];