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>
 		`;
 	},

packages/browser-extension/src/sidepanel.ts

@@ -181,7 +181,7 @@ const loadSession = (sessionId: string) => {
 
 const newSession = () => {
 	const url = new URL(window.location.href);
-	url.search = "";
+	url.search = "?new=true";
 	window.location.href = url.toString();
 };
 
@@ -340,9 +340,10 @@ async function initApp() {
 	// Check for session in URL
 	const urlParams = new URLSearchParams(window.location.search);
 	let sessionIdFromUrl = urlParams.get("session");
+	const isNewSession = urlParams.get("new") === "true";
 
-	// If no session in URL, try to load the most recent session
-	if (!sessionIdFromUrl && storage.sessions) {
+	// If no session in URL and not explicitly creating new, try to load the most recent session
+	if (!sessionIdFromUrl && !isNewSession && storage.sessions) {
 		const latestSessionId = await storage.sessions.getLatestSessionId();
 		if (latestSessionId) {
 			sessionIdFromUrl = latestSessionId;