Fix new session button and improve navigation message styling

- Add ?new=true query param to prevent auto-loading latest session
- Style navigation message as clickable badge with background
- Add cursor-pointer, truncate, and max-width for proper text overflow
- Click navigation message to open page in new tab
- Show URL on hover

packages/browser-extension/src/messages/NavigationMessage.ts

@@ -28,13 +28,21 @@ declare module "@mariozechner/pi-web-ui" {
 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 class="mx-4">
+				<button
+					class="inline-flex items-center gap-2 px-2 py-1 text-sm text-muted-foreground bg-secondary border border-border rounded-lg hover:bg-secondary/80 transition-colors max-w-full cursor-pointer"
+					@click=${() => {
+						chrome.tabs.create({ url: nav.url });
+					}}
+					title="Click to open: ${nav.url}"
+				>
+					${
+						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>
+				</button>
 			</div>
 		`;
 	},