diff --git a/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx b/apps/code/src/renderer/features/sessions/components/SessionResourcesBar.tsx index 26b06f47d..db6f4d320 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 { @@ -22,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: @@ -49,8 +53,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 +72,60 @@ 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[]; } +/** + * 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 - * 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,31 +136,17 @@ export function SessionResourcesBar({ events }: SessionResourcesBarProps) { - - PostHog resources used - - {products.map((product) => { - const Icon = PRODUCT_ICON[product.id] ?? SparkleIcon; - const docUrl = PRODUCT_DOC_URL[product.id]; - return ( - void openUrlInBrowser(docUrl) : undefined - } - title={docUrl ? `Open ${product.label} docs` : undefined} - > - - {product.label} - - ); - })} + + + PostHog products used + + + {products.map((product) => ( + + ))}