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/messages/NavigationMessage.ts

@@ -0,0 +1,68 @@
+import type { MessageRenderer } from "@mariozechner/pi-web-ui";
+import { registerMessageRenderer } from "@mariozechner/pi-web-ui";
+import { html } from "lit";
+
+// ============================================================================
+// NAVIGATION MESSAGE TYPE
+// ============================================================================
+
+export interface NavigationMessage {
+	role: "navigation";
+	url: string;
+	title: string;
+	favicon?: string;
+	tabIndex?: number;
+}
+
+// Extend CustomMessages interface via declaration merging
+declare module "@mariozechner/pi-web-ui" {
+	interface CustomMessages {
+		navigation: NavigationMessage;
+	}
+}
+
+// ============================================================================
+// RENDERER
+// ============================================================================
+
+const navigationRenderer: MessageRenderer<NavigationMessage> = {
+	render: (nav) => {
+		return html`
+			<div class="flex items-center gap-2 px-4 py-2 text-sm text-muted-foreground">
+				${
+					nav.favicon
+						? html`<img src="${nav.favicon}" alt="" class="w-4 h-4 flex-shrink-0" />`
+						: html`<div class="w-4 h-4 flex-shrink-0 bg-muted rounded"></div>`
+				}
+				<span class="truncate">${nav.title}</span>
+			</div>
+		`;
+	},
+};
+
+// ============================================================================
+// REGISTER
+// ============================================================================
+
+export function registerNavigationRenderer() {
+	registerMessageRenderer("navigation", navigationRenderer);
+}
+
+// ============================================================================
+// HELPER
+// ============================================================================
+
+export function createNavigationMessage(
+	url: string,
+	title: string,
+	favicon?: string,
+	tabIndex?: number,
+): NavigationMessage {
+	return {
+		role: "navigation",
+		url,
+		title,
+		favicon,
+		tabIndex,
+	};
+}