From 69bdb917ce23bf62e9bfd86b42101f981a3c50a9 Mon Sep 17 00:00:00 2001 From: Peter Kirkham Date: Tue, 9 Jun 2026 12:40:33 +0100 Subject: [PATCH 1/2] fix(sessions): clarify "PostHog products used" bar and drop misleading Code link The session resources bar above the composer was confusing: the header "PostHog resources used" gave no explanation, and the "Code" chip linked to the posthog.com/code marketing page even though it just means the agent read files from the user's repo. - Rename the header to "PostHog products used" and add a tooltip explaining it lists products the agent drew on this session. - Stop the "Code" chip linking to the /code landing page; it now shows an explanatory tooltip instead of a misleading destination. - Give every chip a hover tooltip (docs link or explanation). Generated-By: PostHog Code Task-Id: 39a13701-8317-4824-82b7-6558a1af8f3e --- .../components/SessionResourcesBar.tsx | 75 ++++++++++++------- 1 file changed, 49 insertions(+), 26 deletions(-) diff --git a/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx b/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx index 26b06f47d..f23b2ba3b 100644 --- a/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx +++ b/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx @@ -1,3 +1,4 @@ +import { Tooltip } from "@components/ui/Tooltip"; import { CHAT_CONTENT_MAX_WIDTH } from "@features/sessions/constants"; import type { IconProps } from "@phosphor-icons/react"; import { @@ -49,8 +50,11 @@ const PRODUCT_ICON: Record> = { /** * Docs page on posthog.com per product, so a chip links to the relevant * product docs. `Partial` on purpose — products without a dedicated docs page - * (e.g. apm, which PostHog folds into LLM analytics / Logs) render as a plain, - * non-clickable badge rather than linking somewhere misleading. + * render as a plain, non-clickable badge rather than linking somewhere + * misleading. Deliberately excluded: + * - `code`: this chip means "the agent read files from your repository", not a + * PostHog data product, so it must not link to the /code marketing page. + * - `apm`: PostHog folds APM into LLM analytics / Logs, no standalone page. */ const PRODUCT_DOC_URL: Partial> = { product_analytics: "https://posthog.com/docs/product-analytics", @@ -65,20 +69,31 @@ const PRODUCT_DOC_URL: Partial> = { cdp: "https://posthog.com/docs/cdp", logs: "https://posthog.com/docs/logs", sql: "https://posthog.com/docs/sql", - code: "https://posthog.com/code", posthog: "https://posthog.com/docs", }; +/** + * Per-product hover explanation. For products that link to docs the default + * "Open … docs" is enough; the entries here override that for chips whose + * meaning isn't obvious from the label alone. + */ +const PRODUCT_TOOLTIP: Partial> = { + code: "PostHog Code read files from your repository this session", +}; + interface SessionResourcesBarProps { events: AcpMessage[]; } /** * Persistent bar above the composer listing the PostHog products the agent has - * touched so far this session — via the MCP `exec` tool, or by reading a file - * from the codebase (the "Code" chip). Each product appears once and is added - * the moment it's first used. Hidden until at least one product has been used. - * Mirrors PlanStatusBar's placement and styling. + * drawn on so far this session — via the MCP `exec` tool, or by reading a file + * from the codebase (the "Code" chip). It's a transparency hint: at a glance + * you can see which parts of PostHog grounded the answer. Each product appears + * once and is added the moment it's first used. Chips that map to a product + * docs page open it on click; others (e.g. "Code") are informational only. + * Hidden until at least one product has been used. Mirrors PlanStatusBar's + * placement and styling. */ export function SessionResourcesBar({ events }: SessionResourcesBarProps) { const products = useMemo(() => accumulateSessionResources(events), [events]); @@ -89,29 +104,37 @@ export function SessionResourcesBar({ events }: SessionResourcesBarProps) { - - PostHog resources used - + + + PostHog products used + + {products.map((product) => { const Icon = PRODUCT_ICON[product.id] ?? SparkleIcon; const docUrl = PRODUCT_DOC_URL[product.id]; + const tooltip = + PRODUCT_TOOLTIP[product.id] ?? + (docUrl ? `Open ${product.label} docs` : product.label); return ( - void openUrlInBrowser(docUrl) : undefined - } - title={docUrl ? `Open ${product.label} docs` : undefined} - > - - {product.label} - + + void openUrlInBrowser(docUrl) : undefined + } + > + + {product.label} + + ); })} From 982e091b2841111d8c89d015a540a1ca44ccd97d Mon Sep 17 00:00:00 2001 From: Peter Kirkham Date: Tue, 9 Jun 2026 13:09:19 +0100 Subject: [PATCH 2/2] refactor(sessions): drop redundant tooltip on label-only chips Per review: chips with no docs link and no explanation (e.g. apm) were getting a tooltip that just repeated the label text. Extract a ResourceChip component that renders such chips bare and only wraps in a Tooltip when there's something extra to say (a docs hint or a per-product explanation). Generated-By: PostHog Code Task-Id: 39a13701-8317-4824-82b7-6558a1af8f3e --- .../components/SessionResourcesBar.tsx | 62 +++++++++++-------- 1 file changed, 36 insertions(+), 26 deletions(-) diff --git a/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx b/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx index f23b2ba3b..db6f4d320 100644 --- a/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx +++ b/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx @@ -23,7 +23,10 @@ import { Badge, Box, Flex, Text } from "@radix-ui/themes"; import type { AcpMessage } from "@shared/types/session-events"; import { openUrlInBrowser } from "@utils/browser"; import { type ComponentType, useMemo } from "react"; -import { accumulateSessionResources } from "./accumulateSessionResources"; +import { + accumulateSessionResources, + type ResourceProduct, +} from "./accumulateSessionResources"; /** * Icon per PostHog product. `Record` keeps this exhaustive: @@ -85,6 +88,35 @@ interface SessionResourcesBarProps { events: AcpMessage[]; } +/** + * A single product chip. Clickable chips (those with a docs page) open it on + * click; chips get a tooltip only when it adds something beyond the label — + * a per-product explanation or an "open docs" hint — otherwise they render + * bare (e.g. apm). + */ +function ResourceChip({ id, label }: ResourceProduct) { + const Icon = PRODUCT_ICON[id] ?? SparkleIcon; + const docUrl = PRODUCT_DOC_URL[id]; + const tooltip = + PRODUCT_TOOLTIP[id] ?? (docUrl ? `Open ${label} docs` : undefined); + + const badge = ( + void openUrlInBrowser(docUrl) : undefined} + > + + {label} + + ); + + if (!tooltip) return badge; + return {badge}; +} + /** * Persistent bar above the composer listing the PostHog products the agent has * drawn on so far this session — via the MCP `exec` tool, or by reading a file @@ -112,31 +144,9 @@ export function SessionResourcesBar({ events }: SessionResourcesBarProps) { PostHog products used - {products.map((product) => { - const Icon = PRODUCT_ICON[product.id] ?? SparkleIcon; - const docUrl = PRODUCT_DOC_URL[product.id]; - const tooltip = - PRODUCT_TOOLTIP[product.id] ?? - (docUrl ? `Open ${product.label} docs` : product.label); - return ( - - void openUrlInBrowser(docUrl) : undefined - } - > - - {product.label} - - - ); - })} + {products.map((product) => ( + + ))}