From 04eae7cea17e42d5d8ea9779e4ccdfd1fdbb9f7e Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Sun, 23 Aug 2026 11:58:59 -0700 Subject: [PATCH] feat(ui): link session hovercard identities to their activity feed (#128313) * feat(ui): link session hovercard identities to their activity feed Names shown in the session hovercard are now links to that person's Activity feed. `activityPersonLocation` in app-route-paths owns the `person` query contract that the Activity filters parse and the sidebar ONLINE list already hand-rolled, so every identity surface builds the same link. The creator avatar gets a decorative twin link (aria-hidden, out of the tab order) and participant names keep the locale's own "with {name}" phrasing and list separators while each name becomes its own link. * test(ui): capture the hovercard identity at rest for PR proof --- ui/src/app-route-paths.ts | 13 ++ ui/src/components/app-sidebar-render.ts | 7 +- ui/src/components/session-hovercard.test.ts | 72 +++++++ ui/src/components/session-hovercard.ts | 187 +++++++++++++----- .../session-progress-hovercard.runtime.ts | 27 ++- .../session-hovercard-identity.e2e.test.ts | 147 ++++++++++++++ ui/src/pages/activity/session-activity.ts | 5 +- ui/src/styles/chat/progress-card.css | 16 ++ 8 files changed, 421 insertions(+), 53 deletions(-) create mode 100644 ui/src/e2e/session-hovercard-identity.e2e.test.ts diff --git a/ui/src/app-route-paths.ts b/ui/src/app-route-paths.ts index ec90a8be9527..928aaa53683a 100644 --- a/ui/src/app-route-paths.ts +++ b/ui/src/app-route-paths.ts @@ -107,6 +107,19 @@ export function pathForRoute(routeId: RouteId, basePath = ""): string { return normalizedBasePath ? `${normalizedBasePath}${path}` : path; } +/** Query key the Activity feed reads to scope its session list to one person. */ +export const ACTIVITY_PERSON_PARAM = "person"; + +/** Activity feed scoped to one person, for every surface that shows an identity. */ +export function activityPersonLocation( + personId: string, + basePath = "", +): { pathname: string; search: string; href: string } { + const pathname = pathForRoute("activity", basePath); + const search = `?${new URLSearchParams({ [ACTIVITY_PERSON_PARAM]: personId }).toString()}`; + return { pathname, search, href: `${pathname}${search}` }; +} + export function pathForWorkboardBoard(boardId: string, basePath = ""): string { if (!isValidWorkboardBoardId(boardId)) { throw new Error("Invalid Workboard board id."); diff --git a/ui/src/components/app-sidebar-render.ts b/ui/src/components/app-sidebar-render.ts index 2c0b06535928..f8edef660686 100644 --- a/ui/src/components/app-sidebar-render.ts +++ b/ui/src/components/app-sidebar-render.ts @@ -5,7 +5,7 @@ import { type NavigationRouteId, type SidebarZoneEntry, } from "../app-navigation.ts"; -import { isRouteId, isSessionRouteId, pathForRoute } from "../app-route-paths.ts"; +import { activityPersonLocation, isRouteId, isSessionRouteId } from "../app-route-paths.ts"; import { resolveControlUiAuthToken } from "../app/control-ui-auth.ts"; import { isNativeWebChromeHost } from "../app/native-web-chrome.ts"; import { readPresenceEntries, resolveCurrentSelfUser } from "../app/user-profile.ts"; @@ -315,14 +315,13 @@ export function renderAppSidebarOnline(host: AppSidebarRenderHost) { ? nothing : html`
${users.map((user) => { - const pathname = pathForRoute("activity", host.basePath); - const search = `?${new URLSearchParams({ person: user.id }).toString()}`; + const { pathname, search, href } = activityPersonLocation(user.id, host.basePath); return html` { if (!shouldHandleNavigationClick(event)) { return; diff --git a/ui/src/components/session-hovercard.test.ts b/ui/src/components/session-hovercard.test.ts index 14b926244a4f..2c5430d5a0f7 100644 --- a/ui/src/components/session-hovercard.test.ts +++ b/ui/src/components/session-hovercard.test.ts @@ -338,6 +338,78 @@ describe("renderSessionHovercard", () => { ).toBe("Alice Baker, Mira, Riley 3 more participants"); }); + it("opens the creator's activity feed from the identity row", () => { + const container = document.createElement("div"); + const navigate = vi.fn(); + render( + renderSessionHovercard({ + row: row(), + personActivity: { basePath: "/ui", navigate }, + }), + container, + ); + + const name = container.querySelector(".session-hovercard__identity-name"); + expect(name?.getAttribute("href")).toBe("/ui/activity?person=alice"); + expect( + container + .querySelector(".session-hovercard__identity-avatar-link") + ?.getAttribute("aria-hidden"), + ).toBe("true"); + + const click = new MouseEvent("click", { bubbles: true, cancelable: true }); + name?.dispatchEvent(click); + expect(navigate).toHaveBeenCalledWith("alice"); + expect(click.defaultPrevented).toBe(true); + }); + + it("links every participant name while keeping the locale's list phrasing", () => { + const container = document.createElement("div"); + const navigate = vi.fn(); + render( + renderSessionHovercard({ + selfUserId: "self", + row: row({ + participants: [ + { type: "human", id: "self", label: "You" }, + { type: "human", id: "mira", label: "Mira" }, + { type: "human", id: "riley", label: "Riley" }, + ], + participantCount: 5, + }), + personActivity: { basePath: "", navigate }, + }), + container, + ); + + expect( + container + .querySelector(".session-hovercard__identity-copy") + ?.textContent?.replace(/\s+/gu, " ") + .trim(), + ).toBe("Alice Baker ยท with Mira, Riley +2"); + const participantLinks = [ + ...container.querySelectorAll("a.session-hovercard__participant-name"), + ]; + expect(participantLinks.map((link) => [link.textContent, link.getAttribute("href")])).toEqual([ + ["Mira", "/activity?person=mira"], + ["Riley", "/activity?person=riley"], + ]); + + participantLinks[1]?.dispatchEvent( + new MouseEvent("click", { bubbles: true, cancelable: true }), + ); + expect(navigate).toHaveBeenCalledWith("riley"); + }); + + it("keeps the identity plain text when no activity route is available", () => { + const container = document.createElement("div"); + render(renderSessionHovercard({ row: row() }), container); + + expect(container.querySelector(".session-hovercard__identity-name")?.tagName).toBe("SPAN"); + expect(container.querySelector(".session-hovercard__identity-avatar-link")).toBeNull(); + }); + it("keeps authoritative overflow when the participant projection is truncated", () => { const container = document.createElement("div"); render( diff --git a/ui/src/components/session-hovercard.ts b/ui/src/components/session-hovercard.ts index cac6afb533ab..8b5d7a442c3b 100644 --- a/ui/src/components/session-hovercard.ts +++ b/ui/src/components/session-hovercard.ts @@ -1,20 +1,26 @@ import type { ProgressCard } from "@openclaw/gateway-protocol"; import { bucketRelativeTimeMs, type RelativeTimeUnit } from "@openclaw/normalization-core"; -import { html, nothing } from "lit"; +import { html, nothing, type TemplateResult } from "lit"; import type { ControlUiSessionPullRequest, ControlUiSessionPullRequestSnapshot, } from "../../../src/gateway/control-ui-contract.js"; +import { activityPersonLocation } from "../app-route-paths.ts"; import { i18n, t } from "../i18n/index.ts"; +import { shouldHandleNavigationClick } from "../lib/navigation-click.ts"; import type { SidebarSessionHovercardRow } from "./app-sidebar-session-types.ts"; import { icons } from "./icons.ts"; -import { sessionOwnerInitials } from "./session-owner-chip.ts"; +import { sessionOwnerInitials, type SessionCreatedActor } from "./session-owner-chip.ts"; import { renderSessionProgressCard } from "./session-progress-card.ts"; import "./viewer-facepile.ts"; const MAX_VISIBLE_PULL_REQUESTS = 4; const MAX_VISIBLE_PARTICIPANTS = 3; +function participantLabel(participant: SessionCreatedActor): string { + return participant.label?.trim() || participant.id?.trim() || ""; +} + type SessionAgeUnit = RelativeTimeUnit | "week" | "month" | "year"; type SessionHovercardAvatarAuth = { @@ -22,6 +28,21 @@ type SessionHovercardAvatarAuth = { authReady: boolean; }; +/** Opens the Activity feed for one identity; supplied by the hovercard host that owns routing. */ +export type SessionHovercardPersonActivity = { + basePath: string; + navigate: (personId: string) => void; +}; + +type SessionHovercardInput = { + row?: SidebarSessionHovercardRow; + selfUserId?: string; + avatarAuth?: SessionHovercardAvatarAuth; + personActivity?: SessionHovercardPersonActivity; + pullRequests?: ControlUiSessionPullRequestSnapshot; + progressCard?: ProgressCard | null; +}; + let channelAvatarElementLoad: Promise | undefined; function ensureChannelAvatarElement(): void { channelAvatarElementLoad ??= import("./channel-avatar.ts"); @@ -158,11 +179,80 @@ function renderHeader(row: SidebarSessionHovercardRow) { `; } -function renderSessionContext( - row: SidebarSessionHovercardRow | undefined, - selfUserId?: string, - avatarAuth?: SessionHovercardAvatarAuth, +type PersonActivityLink = { href: string; open: (event: MouseEvent) => void }; + +function personActivityLink( + personId: string, + personActivity: SessionHovercardPersonActivity | undefined, +): PersonActivityLink | null { + if (!personActivity) { + return null; + } + return { + href: activityPersonLocation(personId, personActivity.basePath).href, + open: (event: MouseEvent) => { + if (!shouldHandleNavigationClick(event)) { + return; + } + event.preventDefault(); + personActivity.navigate(personId); + }, + }; +} + +function renderPersonName(label: string, link: PersonActivityLink | null, className: string) { + return link + ? html`${label}` + : html`${label}`; +} + +/** + * Keeps the locale's own "with {name}" phrasing and list separators while making each + * name its own link. A translation that lost its placeholder falls back to plain text + * rather than dropping the names. + */ +function renderParticipantNames( + participants: readonly SessionCreatedActor[], + formattedNames: string, + personActivity: SessionHovercardPersonActivity | undefined, ) { + const [prefix, suffix] = t("sessionsView.withParticipant").split("{name}"); + if (suffix === undefined) { + return t("sessionsView.withParticipant", { name: formattedNames }); + } + const links = participants.map((participant) => + participant.id ? personActivityLink(participant.id, personActivity) : null, + ); + const parts = new Intl.ListFormat(i18n.getLocale(), { + style: "long", + type: "unit", + }).formatToParts(participants.map(participantLabel)); + const names: (TemplateResult | string)[] = []; + let index = 0; + for (const part of parts) { + if (part.type === "literal") { + names.push(part.value); + continue; + } + names.push( + renderPersonName(part.value, links[index] ?? null, "session-hovercard__participant-name"), + ); + index += 1; + } + return html`${prefix}${names}${suffix}`; +} + +function renderSessionContext({ + row, + selfUserId, + avatarAuth, + personActivity, +}: SessionHovercardInput) { const creator = row?.createdActor; const creatorLabel = creator?.label?.trim() || creator?.id?.trim(); const creatorInitials = creator ? sessionOwnerInitials(creator) : ""; @@ -187,9 +277,7 @@ function renderSessionContext( return true; }); const visibleParticipants = participants.slice(0, MAX_VISIBLE_PARTICIPANTS); - const participantNames = visibleParticipants.map( - (participant) => participant.label || participant.id || "", - ); + const participantNames = visibleParticipants.map(participantLabel); const formattedParticipantNames = new Intl.ListFormat(i18n.getLocale(), { style: "long", type: "unit", @@ -213,40 +301,53 @@ function renderSessionContext( if (row?.channelAvatarUrl) { ensureChannelAvatarElement(); } + const creatorId = creator?.id; + const creatorActivity = creatorId ? personActivityLink(creatorId, personActivity) : null; + const creatorAvatar = row?.channelAvatarUrl + ? html`` + : creatorId + ? html`` + : html``; return html`
${creatorLabel || visibleParticipants.length > 0 ? html`
- ${row?.channelAvatarUrl - ? html`` - : creator?.id - ? html`` - : html``} + @click=${creatorActivity.open} + >${creatorAvatar}` + : creatorAvatar} ${creatorLabel - ? html`${creatorLabel}` + ? renderPersonName(creatorLabel, creatorActivity, "session-hovercard__identity-name") : nothing} ${creatorLabel && visibleParticipants.length > 0 ? html`