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/browser-extension/src/message-transformer.ts

@@ -0,0 +1,32 @@
+import type { Message } from "@mariozechner/pi-ai";
+import type { AppMessage } from "@mariozechner/pi-web-ui";
+import type { NavigationMessage } from "./messages/NavigationMessage.js";
+
+// Custom message transformer for browser extension
+// Handles navigation messages and app-specific message types
+export function browserMessageTransformer(messages: AppMessage[]): Message[] {
+	return messages
+		.filter((m) => {
+			// Keep LLM-compatible messages + navigation messages
+			return m.role === "user" || m.role === "assistant" || m.role === "toolResult" || m.role === "navigation";
+		})
+		.map((m) => {
+			// Transform navigation messages to user messages with <system> tags
+			if (m.role === "navigation") {
+				const nav = m as NavigationMessage;
+				const tabInfo = nav.tabIndex !== undefined ? ` (tab ${nav.tabIndex})` : "";
+				return {
+					role: "user",
+					content: `<system>Navigated to ${nav.title}${tabInfo}: ${nav.url}</system>`,
+				} as Message;
+			}
+
+			// Strip attachments from user messages
+			if (m.role === "user") {
+				const { attachments, ...rest } = m as any;
+				return rest as Message;
+			}
+
+			return m as Message;
+		});
+}