fix(sidebar): add native session links (#460) (#755)

## Summary
- Kept `.session-item` as the row container and moved the primary session surface to a native anchor using `router.buildSessionHref(session.id)`.
- Kept row-level button discoverability and keyboard activation on the SPA session-selection path, while restoring normal row selection for the visible non-link parts of the sidebar item.
- Preserved nested controls (tree toggle, rename flow, star button, side meta) by not converting the whole row into a link.
- Added explicit `Open in new tab` to the sidebar session context menu, using the same canonical URL and `window.open(..., "_blank", "noopener")`.

## Scope
- Limited to `frontend/src/lib/components/sidebar/SessionItem.svelte` and `frontend/src/lib/components/sidebar/SessionList.test.ts`.
- Keeps the outer row container and existing nested controls intact; broader session-entry surfaces stay out of scope for this slice.

## Review Notes
- No full-app navigation is added in this slice; both the anchor activation path and the row overflow click surface keep SPA state semantics via `sessions.selectSession(session.id)` while still exposing the canonical href for native link behaviors.
- The new context-menu action reuses `sessionHref` derived from the same helper used by the anchor.

Fixes #460


Co-authored-by: Rod Boev <rodboev@users.noreply.github.com>

Author: rodboev

frontend/src/lib/components/sidebar/SessionItem.svelte

@@ -18,6 +18,7 @@
     UsersRoundIcon,
   } from "../../icons.js";
   import StatusDot from "../common/StatusDot.svelte";
+  import { router } from "../../stores/router.svelte.js";
 
   interface Props {
     session: SessionGroupInput;
@@ -140,6 +141,10 @@
 
   let hasChildren = $derived(childCount > 0 && !!onToggleExpand);
 
+  const sessionHref = $derived.by(() =>
+    router.buildSessionHref(session.id),
+  );
+
   /** Whether this is an orphaned teammate showing at root level. */
   let isOrphanedTeammate = $derived(
     depth === 0 && isTeamSession,
@@ -216,6 +221,40 @@
     startRename();
   }
 
+  function handleSessionClick(e: MouseEvent) {
+    if (
+      e.metaKey ||
+      e.ctrlKey ||
+      e.shiftKey ||
+      e.altKey ||
+      e.button !== 0
+    ) {
+      return;
+    }
+    e.preventDefault();
+    sessions.selectSession(session.id);
+  }
+
+  function handleRowClick(e: MouseEvent) {
+    if (
+      e.metaKey ||
+      e.ctrlKey ||
+      e.shiftKey ||
+      e.altKey ||
+      e.button !== 0
+    ) {
+      return;
+    }
+    const target = e.target;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    if (target.closest("a, button, input")) {
+      return;
+    }
+    sessions.selectSession(session.id);
+  }
+
   $effect(() => {
     if (!contextMenu) return;
     function handler() {
@@ -246,6 +285,7 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
   class="session-item"
   class:active={isActive}
@@ -258,8 +298,16 @@
   aria-current={isActive ? "page" : undefined}
   tabindex="0"
   style:padding-left="{8 + depth * 16}px"
-  onclick={() => sessions.selectSession(session.id)}
-  onkeydown={(e) => { if (e.target !== e.currentTarget) return; if (e.key === "Enter" || e.key === " ") { e.preventDefault(); sessions.selectSession(session.id); } }}
+  onclick={handleRowClick}
+  onkeydown={(e) => {
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      sessions.selectSession(session.id);
+    }
+  }}
   oncontextmenu={handleContextMenu}
 >
   <!-- Tree expand/collapse or connector -->
@@ -308,35 +356,40 @@
         }}
       />
     {:else}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div
-        class="session-name"
-        class:shell={displayLabel.isShell}
-        ondblclick={handleDblClick}
+      <a
+        class="session-info-link"
+        href={sessionHref}
+        onclick={handleSessionClick}
       >
-        {#if displayLabel.isShell}
-          <code>{displayLabel.text}</code>
-        {:else}
-          {displayLabel.text}
-        {/if}
-      </div>
+        <div
+          class="session-name"
+          class:shell={displayLabel.isShell}
+          ondblclick={handleDblClick}
+        >
+          {#if displayLabel.isShell}
+            <code>{displayLabel.text}</code>
+          {:else}
+            {displayLabel.text}
+          {/if}
+        </div>
+        <div class="session-meta">
+          {#if !hideProject}
+            <span class="session-project">{session.project}</span>
+          {/if}
+          <span class="session-time">{timeStr}</span>
+          <span class="session-count">{session.user_message_count}</span>
+          {#if hasSubagents}
+            <UserRoundIcon class="group-hint-icon" size="9" strokeWidth="2" aria-hidden="true" />
+          {/if}
+          {#if hasTeammates}
+            <UsersRoundIcon class="group-hint-icon" size="11" strokeWidth="2" aria-hidden="true" />
+          {/if}
+          {#if childCount > 0 && !onToggleExpand}
+            <span class="continuation-badge">x{continuationCount}</span>
+          {/if}
+        </div>
+      </a>
     {/if}
-    <div class="session-meta">
-      {#if !hideProject}
-        <span class="session-project">{session.project}</span>
-      {/if}
-      <span class="session-time">{timeStr}</span>
-      <span class="session-count">{session.user_message_count}</span>
-      {#if hasSubagents}
-        <UserRoundIcon class="group-hint-icon" size="9" strokeWidth="2" aria-hidden="true" />
-      {/if}
-      {#if hasTeammates}
-        <UsersRoundIcon class="group-hint-icon" size="11" strokeWidth="2" aria-hidden="true" />
-      {/if}
-      {#if childCount > 0 && !onToggleExpand}
-        <span class="continuation-badge">x{continuationCount}</span>
-      {/if}
-    </div>
   </div>
 
   {#if !compact}
@@ -377,6 +430,15 @@
     <button class="context-menu-item" onclick={startRename}>
       Rename
     </button>
+    <button
+      class="context-menu-item"
+      onclick={() => {
+        window.open(sessionHref, "_blank", "noopener");
+        closeContextMenu();
+      }}
+    >
+      Open in new tab
+    </button>
     <button class="context-menu-item danger" onclick={handleDelete}>
       Delete
     </button>
@@ -518,6 +580,13 @@
     flex: 1;
   }
 
+  .session-info-link {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+    min-width: 0;
+  }
+
   .session-name {
     font-size: 12px;
     font-weight: 450;

frontend/src/lib/components/sidebar/SessionList.test.ts

@@ -421,6 +421,155 @@ describe("SessionList visible hydration", () => {
     expect(load).toHaveBeenCalledTimes(1);
   });
 
+  it("renders the primary session surface as a native href", async () => {
+    sessions.sessions = [
+      makeSession({
+        id: "native-session",
+        display_name: "Native link session",
+        is_index_only: false,
+      }),
+    ];
+    vi.spyOn(sessions, "hydrateVisibleSessions").mockResolvedValue(
+      undefined,
+    );
+
+    component = mount(SessionList, { target: document.body });
+    await tick();
+
+    const link = document.querySelector<HTMLAnchorElement>(
+      ".session-info-link",
+    );
+    expect(link).not.toBeNull();
+    expect(link?.getAttribute("href")).toBe("/sessions/native-session");
+  });
+
+  it("keeps keyboard-style anchor activation on the SPA session path", async () => {
+    const selectSession = vi
+      .spyOn(sessions, "selectSession")
+      .mockImplementation(() => {});
+    sessions.sessions = [
+      makeSession({
+        id: "keyboard-session",
+        display_name: "Keyboard target",
+        is_index_only: false,
+      }),
+    ];
+    vi.spyOn(sessions, "hydrateVisibleSessions").mockResolvedValue(
+      undefined,
+    );
+
+    component = mount(SessionList, { target: document.body });
+    await tick();
+
+    const link = document.querySelector<HTMLAnchorElement>(
+      ".session-info-link",
+    );
+    expect(link).not.toBeNull();
+    const click = new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      detail: 0,
+    });
+    link!.dispatchEvent(click);
+
+    expect(click.defaultPrevented).toBe(true);
+    expect(selectSession).toHaveBeenCalledWith("keyboard-session");
+  });
+
+  it("keeps the non-link parts of the row selectable", async () => {
+    const selectSession = vi
+      .spyOn(sessions, "selectSession")
+      .mockImplementation(() => {});
+    sessions.sessions = [
+      makeSession({
+        id: "row-session",
+        display_name: "Row target",
+        is_index_only: false,
+      }),
+    ];
+    vi.spyOn(sessions, "hydrateVisibleSessions").mockResolvedValue(
+      undefined,
+    );
+
+    component = mount(SessionList, { target: document.body });
+    await tick();
+
+    const sideMeta = document.querySelector<HTMLElement>(".side-meta");
+    expect(sideMeta).not.toBeNull();
+    sideMeta!.click();
+
+    expect(selectSession).toHaveBeenCalledWith("row-session");
+  });
+
+  it("keeps button-discoverable rows alongside native session links", async () => {
+    sessions.sessions = [
+      makeSession({
+        id: "button-session",
+        display_name: "Button target",
+        is_index_only: false,
+      }),
+    ];
+    vi.spyOn(sessions, "hydrateVisibleSessions").mockResolvedValue(
+      undefined,
+    );
+
+    component = mount(SessionList, { target: document.body });
+    await tick();
+
+    const row = document.querySelector<HTMLElement>(".session-item");
+    const link = document.querySelector<HTMLAnchorElement>(
+      ".session-info-link",
+    );
+    expect(row).not.toBeNull();
+    expect(row?.getAttribute("role")).toBe("button");
+    expect(row?.getAttribute("tabindex")).toBe("0");
+    expect(link).not.toBeNull();
+    expect(link?.getAttribute("href")).toBe("/sessions/button-session");
+  });
+
+  it("opens the same canonical href from the context menu in a new tab", async () => {
+    const openSpy = vi
+      .spyOn(window, "open")
+      .mockReturnValue(null as unknown as Window);
+    sessions.sessions = [
+      makeSession({
+        id: "native-open-session",
+        display_name: "Open in new tab target",
+        is_index_only: false,
+      }),
+    ];
+    vi.spyOn(sessions, "hydrateVisibleSessions").mockResolvedValue(
+      undefined,
+    );
+
+    component = mount(SessionList, { target: document.body });
+    await tick();
+
+    const row = document.querySelector<HTMLElement>(".session-item");
+    expect(row).not.toBeNull();
+    row!.dispatchEvent(
+      new MouseEvent("contextmenu", {
+        bubbles: true,
+        cancelable: true,
+        clientX: 7,
+        clientY: 8,
+      }),
+    );
+    await tick();
+
+    const openInNewTab = Array.from(
+      document.querySelectorAll<HTMLButtonElement>(".context-menu-item"),
+    ).find((button) => button.textContent === "Open in new tab");
+    expect(openInNewTab).not.toBeNull();
+    openInNewTab!.click();
+
+    expect(openSpy).toHaveBeenCalledWith(
+      "/sessions/native-open-session",
+      "_blank",
+      "noopener",
+    );
+  });
+
   it("uses is_teammate for the collapsed group teammate hint", async () => {
     sessions.sessions = [
       makeSession({ id: "root", display_name: "Root", is_index_only: true }),