feat(webui): meaningful session names in the Activity Log + link the Sessions page (#836)

* feat(webui): meaningful session names in the Activity Log + link the Sessions page

The Activity Log's Session filter showed opaque id suffixes ("...139c9",
"...851e1"), which tell the user nothing about which AI client a session was.

Root cause was a two-sided miss. Activity.vue already read
`a.metadata?.client_name` — but the backend never writes that field, so the
label always fell through to the id suffix. Meanwhile the client name has
existed all along on the session record (captured from the MCP `initialize`
handshake's clientInfo) and is already served by GET /api/v1/sessions.

Fixed by joining the two at read time: activity rows already carry session_id
as a foreign key, and the session record is the canonical home for the client
name. The alternative — denormalizing the name into every activity record —
would mean a storage lookup and cache in the tool-call hot path, and
EmitActivityToolCallCompleted already takes 17 parameters. It would also only
fix records written after the change, leaving existing rows showing hashes.

The filter now reads "Claude Code · 14:32". Two sessions of the same client
started in the same minute get a disambiguating suffix; a session with no
clientInfo keeps the old id-suffix fallback, so this is never worse than before.

Also links the Sessions page. A complete Sessions.vue and a /sessions route
already existed — they were simply never added to the personal-edition sidebar
(only to the Teams admin menu). So this unhides a page rather than building one.
Placed above Activity Log: a session is the parent of activity records.

Display names mirror the macOS tray's connectedClientNames so the two surfaces
agree on what a client is called.

* fix(webui): resolve sessions that appear after mount; bound and disambiguate labels

Four defects found by cross-model (Codex) review of the session-name join.

1. Stale join (the important one). loadSessions ran only on mount, but the
   Activity Log is a LIVE page: a client that connects while it is open delivers
   rows for a session the map has never seen, so its filter option stayed an
   opaque "...139c9" until the page was remounted.

   Now a watch on `activities` refreshes the join whenever a genuinely new
   session id appears. Concurrent fetches are coalesced so an SSE burst cannot
   fan out into N parallel requests.

2. Refetch storm, latent in the fix for (1). The core retains only the 100 most
   recent sessions, so an old session's activity rows can outlive its record and
   never become resolvable. Left alone, every refresh would see them as unknown
   and refetch forever. Ids that are still missing after a fresh fetch are
   remembered as unresolvable and never asked about again. (A failed FETCH is
   deliberately not marked unresolvable — that is transient and should retry.)
   Those rows keep the id-suffix fallback, i.e. exactly today's behaviour.

3. Colliding "disambiguators". The suffix was a fixed 5 chars, which is not
   unique: two same-client sessions started in the same minute whose ids end in
   the same 5 characters produced byte-identical labels — and for sessions with
   no client name, the suffix IS the whole label. The suffix now grows until it
   actually tells the group apart.

4. Unbounded client name. clientInfo.name is attacker-controllable: any MCP
   client can send an arbitrary string at initialize and the core stores it
   verbatim. Vue escapes it, so this is not XSS — but a 10KB name would be dumped
   into a <select> option and wreck the filter layout. Unrecognised names are now
   whitespace-collapsed and truncated to 32 chars. Recognised clients are
   unaffected (they map to a short display name).

Also sorts the picker by epoch ms rather than by comparing ISO strings: those
carry a timezone offset, so lexical order is not chronological order across
offsets. Ties break on id, so the order is stable instead of depending on Map
insertion.

Verified live, without a page reload: a session created while the Activity Log
was open resolved from a hash to "Gemini · 08:33 AM" on the next refresh, using
exactly one extra /api/v1/sessions call — and five further refreshes triggered
zero more. 282/282 frontend tests pass (6 new, covering each defect above).

Author: Dumbris

ROADMAP.md

@@ -336,6 +336,7 @@ graph LR
 
 ```mermaid
 graph LR
+  sessions_web_ui["Sessions in the Web UI: meaningful session na…"]
   action_log_glance_view["At-a-glance action log view (top signals, hea…"]
   action_log_tray_menu["Activity in the tray menu (recent tool calls…"]
   tray_menu_open_telemetry["tray_menu_opened counter: Swift menuWillOpen…"]
@@ -344,12 +345,15 @@ graph LR
   action_log_glance_view --> action_log_tray_menu
   action_log_glance_view --> action_log_retention_tie_in
 
+  classDef done fill:#1f7a1f,stroke:#0d3d0d,color:#ffffff;
   classDef todo fill:#6e7781,stroke:#3d4248,color:#ffffff;
+  class sessions_web_ui done;
   class action_log_glance_view,action_log_tray_menu,tray_menu_open_telemetry,action_log_retention_tie_in todo;
 ```
 
 | Task | Status | Refs |
 | --- | --- | --- |
+| Sessions in the Web UI: meaningful session names in the Activity Log filter + the existing /sessions page linked in the sidebar | 🟢 Done | — |
 | At-a-glance action log view (top signals, health) | ⚪ Todo | — |
 | Activity in the tray menu (recent tool calls + security events, jump to full log) | ⚪ Todo | — |
 | tray_menu_opened counter: Swift menuWillOpen (MCPProxyApp.swift:192) -> lightweight POST /api/v1/telemetry/tray-menu-opened -> registry counter -> heartbeat tray_menu_opened_24h | ⚪ Todo | — |

frontend/src/components/SidebarNav.vue

@@ -263,6 +263,18 @@
                 <span v-show="!collapsed">Agent Tokens</span>
               </router-link>
             </li>
+            <li>
+              <router-link
+                to="/sessions"
+                :class="{ 'active': isActiveRoute('/sessions') }"
+                class="rounded-lg font-medium"
+                :title="collapsed ? 'Sessions' : ''"
+                data-test="sidebar-sessions"
+              >
+                <IconSessions class="w-5 h-5 shrink-0" />
+                <span v-show="!collapsed">Sessions</span>
+              </router-link>
+            </li>
             <li>
               <router-link
                 to="/activity"
@@ -542,6 +554,10 @@ const IconTokens = makeIcon(
 const IconActivity = makeIcon(
   'M4 12h3l3-8 4 16 3-8h3'
 )
+// Two chat bubbles — a session is one AI client's conversation with the proxy.
+const IconSessions = makeIcon(
+  'M8 10h8M8 14h5M4 5a1 1 0 011-1h14a1 1 0 011 1v10a1 1 0 01-1 1H9l-5 4V5z'
+)
 const IconShield = makeIcon(
   'M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3zm-3 9l2 2 4-4'
 )

frontend/src/utils/sessionLabel.ts

@@ -0,0 +1,159 @@
+/**
+ * Human-meaningful labels for MCP sessions.
+ *
+ * A session is one AI client's conversation with the proxy. The raw session id
+ * is an opaque uuid, so surfacing it (`...139c9`) tells the user nothing. The
+ * MCP `initialize` handshake already gives us `clientInfo.name`, which the core
+ * persists on the session record and serves on `GET /api/v1/sessions` — that is
+ * the name we show.
+ *
+ * Display names mirror the macOS tray (DashboardView.swift `connectedClientNames`)
+ * so the two surfaces agree on what a client is called.
+ */
+
+/** Known clients, matched case-insensitively as substrings of clientInfo.name. */
+const KNOWN_CLIENTS: Array<[needle: string, display: string]> = [
+  ['claude', 'Claude Code'],
+  ['cursor', 'Cursor'],
+  ['vscode', 'VS Code'],
+  ['copilot', 'VS Code'],
+  ['codex', 'Codex'],
+  ['gemini', 'Gemini'],
+  ['antigravity', 'Antigravity'],
+  ['windsurf', 'Windsurf'],
+]
+
+/**
+ * Max rendered length of an unrecognised client name.
+ *
+ * `clientInfo.name` is attacker-controllable: any MCP client can send an
+ * arbitrary string at initialize and the core stores it verbatim. Vue escapes it
+ * on render, so there is no XSS — but an unbounded name would still be dumped
+ * into a `<select>` option and blow out the filter layout. Bound it.
+ */
+const MAX_CLIENT_NAME = 32
+
+/** Shortest id suffix we ever show. Grows on demand to stay unique. */
+const MIN_SUFFIX = 5
+
+/**
+ * Map a raw MCP clientInfo.name to a display name. Unknown clients are shown
+ * verbatim but length-bounded — a name we don't recognise is still far better
+ * than a hash.
+ */
+export function prettyClientName(raw?: string): string {
+  const name = (raw ?? '').trim()
+  if (!name) return ''
+
+  const lower = name.toLowerCase()
+  for (const [needle, display] of KNOWN_CLIENTS) {
+    if (lower.includes(needle)) return display
+  }
+
+  // Unrecognised, and therefore untrusted: collapse whitespace (a newline would
+  // break the option label) and truncate.
+  const flat = name.replace(/\s+/g, ' ')
+  return flat.length > MAX_CLIENT_NAME ? `${flat.slice(0, MAX_CLIENT_NAME - 1)}…` : flat
+}
+
+/** Last `len` chars of a session id. */
+export function sessionIdSuffix(sessionId: string, len: number = MIN_SUFFIX): string {
+  return sessionId.slice(-len)
+}
+
+function clockTime(iso?: string): string {
+  if (!iso) return ''
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+export interface SessionLabelInput {
+  sessionId: string
+  /** Raw clientInfo.name, e.g. "claude-code". Absent for sessions we never saw initialize. */
+  clientName?: string
+  /** ISO start time, used to tell two sessions of the same client apart. */
+  startTime?: string
+}
+
+/** The label with no disambiguating suffix. "" when there is no client name. */
+function baseLabel(input: SessionLabelInput): string {
+  const pretty = prettyClientName(input.clientName)
+  if (!pretty) return '' // no client name → the id is all we have
+  const time = clockTime(input.startTime)
+  return time ? `${pretty} · ${time}` : pretty
+}
+
+/**
+ * Build the label shown in the Activity Log session filter.
+ *
+ *   "Claude Code · 14:32"          — the common case
+ *   "Claude Code · 14:32 (139c9)"  — two Claude Code sessions started the same minute
+ *   "...139c9"                     — no clientInfo (pre-initialize, or an evicted session)
+ *
+ * `suffixLen` is chosen by buildSessionLabels so the suffix is long enough to
+ * actually disambiguate — a fixed-width suffix can itself collide.
+ */
+export function formatSessionLabel(
+  input: SessionLabelInput,
+  opts: { ambiguous?: boolean; suffixLen?: number } = {}
+): string {
+  const len = opts.suffixLen ?? MIN_SUFFIX
+  const base = baseLabel(input)
+
+  // No client name: the id suffix IS the label (unchanged legacy behaviour).
+  if (!base) return `...${sessionIdSuffix(input.sessionId, len)}`
+
+  return opts.ambiguous ? `${base} (${sessionIdSuffix(input.sessionId, len)})` : base
+}
+
+/**
+ * Shortest suffix length that tells every id in `ids` apart.
+ *
+ * A fixed 5-char suffix is NOT guaranteed unique — two ids can share their last
+ * five characters — so grow it until the ids are distinguished, falling back to
+ * the longest id. Session ids are unique, so this always terminates.
+ */
+function uniqueSuffixLen(ids: string[]): number {
+  const maxLen = Math.max(...ids.map(id => id.length))
+  for (let len = MIN_SUFFIX; len < maxLen; len++) {
+    if (new Set(ids.map(id => id.slice(-len))).size === ids.length) return len
+  }
+  return maxLen
+}
+
+/**
+ * Label a whole list at once, resolving collisions so no two sessions ever share
+ * a label. Returns a Map keyed by session id.
+ */
+export function buildSessionLabels(sessions: SessionLabelInput[]): Map<string, string> {
+  // Group by the label they would get with no disambiguation. Sessions with no
+  // client name all share the "" group: their label is the id suffix, which must
+  // be unique among themselves too.
+  const groups = new Map<string, SessionLabelInput[]>()
+  for (const s of sessions) {
+    const key = baseLabel(s)
+    const group = groups.get(key)
+    if (group) group.push(s)
+    else groups.set(key, [s])
+  }
+
+  const labels = new Map<string, string>()
+  for (const [key, group] of groups) {
+    const named = key !== ''
+
+    // A named session alone in its group needs no suffix at all.
+    if (named && group.length === 1) {
+      labels.set(group[0].sessionId, formatSessionLabel(group[0]))
+      continue
+    }
+
+    // Otherwise every member gets a suffix, long enough to be unique within the
+    // group. (Unnamed sessions always carry one — it is their whole label.)
+    const suffixLen = group.length > 1 ? uniqueSuffixLen(group.map(s => s.sessionId)) : MIN_SUFFIX
+    for (const s of group) {
+      labels.set(s.sessionId, formatSessionLabel(s, { ambiguous: named, suffixLen }))
+    }
+  }
+  return labels
+}

frontend/src/views/Activity.vue

@@ -694,6 +694,7 @@ import { useRoute } from 'vue-router'
 import { useSystemStore } from '@/stores/system'
 import api from '@/services/api'
 import type { ActivityRecord, ActivitySummaryResponse } from '@/types/api'
+import { buildSessionLabels } from '@/utils/sessionLabel'
 import JsonViewer from '@/components/JsonViewer.vue'
 
 const route = useRoute()
@@ -766,29 +767,111 @@ interface SessionOption {
   id: string
   label: string
   clientName?: string
+  startTime?: string
 }
+
+// Client identity lives on the session record, not the activity record — an
+// activity row only carries session_id. We join the two here so the filter can
+// show "Claude Code · 14:32" instead of an opaque "...139c9".
+const sessionInfo = ref(new Map<string, { clientName?: string; startTime?: string }>())
+
+// Session ids we have already tried and failed to resolve. The core keeps only
+// the 100 most recent sessions, so an old session's activity rows can outlive
+// its record and never become resolvable. Without this set, every refresh would
+// see them as "unknown" and refetch forever.
+const unresolvableSessions = ref(new Set<string>())
+
+let sessionsInFlight: Promise<void> | null = null
+
+const loadSessions = async () => {
+  // Coalesce: a burst of SSE events must not fan out into N parallel fetches.
+  if (sessionsInFlight) return sessionsInFlight
+
+  sessionsInFlight = (async () => {
+    try {
+      const response = await api.getSessions(100)
+      const next = new Map<string, { clientName?: string; startTime?: string }>()
+      for (const s of response.data?.sessions ?? []) {
+        next.set(s.id, { clientName: s.client_name, startTime: s.start_time })
+      }
+      sessionInfo.value = next
+
+      // Anything still unknown after a fresh fetch is gone for good (evicted by
+      // the 100-session cap). Remember it so we stop asking.
+      for (const a of activities.value) {
+        if (a.session_id && !next.has(a.session_id)) {
+          unresolvableSessions.value.add(a.session_id)
+        }
+      }
+    } catch {
+      // Non-fatal: without session metadata the filter degrades to id suffixes,
+      // which is exactly the previous behaviour. Never block the activity log.
+      // Deliberately NOT marked unresolvable — a transient failure should be
+      // retried the next time an unknown session shows up.
+    } finally {
+      sessionsInFlight = null
+    }
+  })()
+
+  return sessionsInFlight
+}
+
+// The Activity Log is a live page: a client can connect while it is open, and
+// SSE will deliver its rows. Those sessions were not in the map we fetched on
+// mount, so refresh the join whenever a genuinely new session id appears.
+const refreshSessionsIfUnknown = () => {
+  const hasUnknown = activities.value.some(
+    a =>
+      a.session_id &&
+      !sessionInfo.value.has(a.session_id) &&
+      !unresolvableSessions.value.has(a.session_id)
+  )
+  if (hasUnknown) void loadSessions()
+}
+
 const availableSessions = computed((): SessionOption[] => {
-  const sessionsMap = new Map<string, { clientName?: string }>()
+  const seen = new Map<string, { clientName?: string; startTime?: string }>()
   activities.value.forEach(a => {
-    if (a.session_id && !sessionsMap.has(a.session_id)) {
-      // Try to get client name from metadata or any available source
-      const clientName = a.metadata?.client_name as string | undefined
-      sessionsMap.set(a.session_id, { clientName })
+    if (a.session_id && !seen.has(a.session_id)) {
+      const info = sessionInfo.value.get(a.session_id)
+      seen.set(a.session_id, {
+        // Prefer the session record; fall back to metadata for records that
+        // carry it, then to nothing (→ id suffix).
+        clientName: info?.clientName ?? (a.metadata?.client_name as string | undefined),
+        startTime: info?.startTime ?? a.timestamp,
+      })
     }
   })
 
-  return Array.from(sessionsMap.entries())
-    .map(([sessionId, info]) => {
-      // Format: "ClientName ...12345" or "...12345" if no client name
-      const suffix = sessionId.slice(-5)
-      const label = info.clientName
-        ? `${info.clientName} ...${suffix}`
-        : `...${suffix}`
-      return { id: sessionId, label, clientName: info.clientName }
-    })
-    .sort((a, b) => a.label.localeCompare(b.label))
+  const entries = Array.from(seen.entries()).map(([sessionId, info]) => ({
+    sessionId,
+    clientName: info.clientName,
+    startTime: info.startTime,
+  }))
+  const labels = buildSessionLabels(entries)
+
+  return entries
+    .map(e => ({
+      id: e.sessionId,
+      label: labels.get(e.sessionId) ?? `...${e.sessionId.slice(-5)}`,
+      clientName: e.clientName,
+      startTime: e.startTime,
+    }))
+    // Most recent session first — in a session picker, recency beats alphabet.
+    // Compare epoch ms, not the ISO strings: those carry a timezone offset
+    // ("...+03:00"), so lexical order is not chronological order across offsets.
+    // A missing or unparseable start time sorts last; id breaks ties so the
+    // order is stable rather than dependent on Map insertion.
+    .sort((a, b) => epochOf(b.startTime) - epochOf(a.startTime) || a.id.localeCompare(b.id))
 })
 
+/** Epoch ms for sorting; -Infinity for missing/unparseable, so it sorts last. */
+const epochOf = (iso?: string): number => {
+  if (!iso) return -Infinity
+  const t = new Date(iso).getTime()
+  return Number.isNaN(t) ? -Infinity : t
+}
+
 // Get session label by ID for display in Active Filters
 const getSessionLabel = (sessionId: string): string => {
   const session = availableSessions.value.find(s => s.id === sessionId)
@@ -1182,6 +1265,12 @@ const handleKeydown = (event: KeyboardEvent) => {
   }
 }
 
+// Keep the session join fresh no matter how activities arrived — polling,
+// manual refresh, or an SSE event for a client that connected just now. Watching
+// the list covers every mutation path; refreshSessionsIfUnknown is a no-op
+// unless a genuinely new session id showed up, and coalesces concurrent fetches.
+watch(activities, refreshSessionsIfUnknown)
+
 // Lifecycle
 onMounted(() => {
   // Check for session filter from URL query params (linked from Dashboard/Sessions pages)
@@ -1191,6 +1280,7 @@ onMounted(() => {
   }
 
   loadActivities()
+  loadSessions()
 
   // Listen for SSE activity events
   window.addEventListener('mcpproxy:activity', handleActivityEvent as EventListener)