fix(signals): make inbox example cards and tool-off badge answer clicks

products/signals/frontend/inbox/components/config/AgentsRoster.tsx

@@ -495,11 +495,30 @@ const AgentRow = memo(function AgentRow({
                     </div>
                     <span className="truncate text-xs leading-4 text-muted">{agent.watches}</span>
                 </div>
-                {tag && (
+                {toolOff && tool?.enablement ? (
+                    // A live badge, not a dead one: clicking it turns the tool on, the same action the
+                    // expansion offers one disclosure level below.
+                    <Tooltip title={`${tool.toolName} is off, so this source has nothing to read. Turn it on.`}>
+                        <LemonTag
+                            type="warning"
+                            size="small"
+                            forceClickable
+                            icon={enablingTool ? <Spinner /> : undefined}
+                            onClick={(e) => {
+                                e.stopPropagation()
+                                if (!enablingTool) {
+                                    onEnableTool(tool)
+                                }
+                            }}
+                        >
+                            Turn it on
+                        </LemonTag>
+                    </Tooltip>
+                ) : tag ? (
                     <LemonTag type={tag.type} size="small">
                         {tag.label}
                     </LemonTag>
-                )}
+                ) : null}
                 <span className="w-38 shrink-0 truncate text-right text-xs text-muted">
                     {entities.length > 0 && `${enabledCount} of ${entities.length} ${agent.entityNoun} on`}
                 </span>
@@ -585,7 +604,7 @@ export function AgentsRoster(): JSX.Element {
         isHealthChecksToggling,
         isCiSignalsToggling,
         toolStatusBySource,
-        enablingTool,
+        enablingTools,
     } = useValues(signalSourcesLogic)
     const {
         toggleConversations,
@@ -832,16 +851,15 @@ export function AgentsRoster(): JSX.Element {
                                 agent.steerable && state.sourceConfig && !state.sourceConfig.id.startsWith('new_')
                                     ? state.sourceConfig
                                     : null
+                            const enablement = toolStatusBySource[agent.source]?.enablement
                             return (
                                 <AgentRow
                                     key={agent.source}
                                     agent={agent}
                                     state={state}
                                     tool={toolStatusBySource[agent.source]}
                                     expanded={expandedSource === agent.source}
-                                    enablingTool={
-                                        !!enablingTool && enablingTool === toolStatusBySource[agent.source]?.enablement
-                                    }
+                                    enablingTool={!!enablement && enablingTools.has(enablement)}
                                     onExpand={() =>
                                         setExpandedSource((current) => (current === agent.source ? null : agent.source))
                                     }

products/signals/frontend/inbox/components/onboarding/InboxOnboarding.scss

@@ -22,3 +22,28 @@
         animation: none;
     }
 }
+
+// A click on an example card scrolls to the setup command and pulses this ring, so the click has a
+// visible answer instead of a silent one.
+.InboxOnboarding__commandPulse {
+    animation: InboxOnboarding__commandPulse 0.9s ease-out 2;
+}
+
+@keyframes InboxOnboarding__commandPulse {
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 transparent;
+    }
+
+    35% {
+        box-shadow: 0 0 0 4px var(--color-accent);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    // No pulse, but keep the ring as a static highlight so the click still has a visible answer.
+    .InboxOnboarding__commandPulse {
+        animation: none;
+        box-shadow: 0 0 0 4px var(--color-accent);
+    }
+}

products/signals/frontend/inbox/components/onboarding/InboxOnboarding.test.tsx

@@ -0,0 +1,35 @@
+import '@testing-library/jest-dom'
+
+import { cleanup, fireEvent, render } from '@testing-library/react'
+
+import { InboxOnboardingTakeover } from './InboxOnboarding'
+
+// The manual-setup escape hatch pulls in `inboxOnboardingLogic` (kea); it is unrelated to the card click.
+jest.mock('./ManualSetupAction', () => ({ ManualSetupAction: () => null }))
+jest.mock('../../inboxAnalytics', () => ({
+    captureInboxWelcomeViewed: jest.fn(),
+    captureInboxWelcomeCommandCopied: jest.fn(),
+}))
+jest.mock('./meep', () => ({ playMeep: jest.fn() }))
+jest.mock('lib/components/TZLabel', () => ({ TZLabel: ({ time }: { time: string }) => <span>{time}</span> }))
+
+describe('InboxOnboardingTakeover example cards', () => {
+    beforeAll(() => {
+        // jsdom does not implement scrollIntoView; stub it so the click handler can call it.
+        Element.prototype.scrollIntoView = jest.fn()
+    })
+    afterEach(cleanup)
+
+    it('answers a click on an example card by scrolling to the setup command and pulsing it', () => {
+        const { container, getAllByLabelText } = render(<InboxOnboardingTakeover />)
+        // A dead click leaves the DOM unchanged; the pulse ring must be absent before the click.
+        expect(container.querySelector('.InboxOnboarding__commandPulse')).toBeNull()
+
+        const overlays = getAllByLabelText(/Jump to the setup command/i)
+        expect(overlays.length).toBeGreaterThan(0)
+        fireEvent.click(overlays[0])
+
+        expect(Element.prototype.scrollIntoView).toHaveBeenCalled()
+        expect(container.querySelector('.InboxOnboarding__commandPulse')).not.toBeNull()
+    })
+})

products/signals/frontend/inbox/components/onboarding/InboxOnboarding.tsx

@@ -1,7 +1,7 @@
 import './InboxOnboarding.scss'
 
 import { useActions } from 'kea'
-import { useEffect } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 
 import { IconBolt, IconGithub, IconInfo, IconNotebook, IconPause, IconX } from '@posthog/icons'
 import { LemonButton, Tooltip } from '@posthog/lemon-ui'
@@ -32,7 +32,7 @@ interface Beat {
     label: string
     description: JSX.Element
     subtext: string | JSX.Element
-    preview: JSX.Element
+    Preview: (props: { onExampleClick: () => void }) => JSX.Element
 }
 
 /**
@@ -74,7 +74,7 @@ const BEATS: Beat[] = [
                 Your first 3 PRs each month are free, then it's $15 per PR after that. <PrPricingInfo />
             </>
         ),
-        preview: <PullRequestPreview />,
+        Preview: PullRequestPreview,
     },
     {
         label: 'Reports, when it needs your call.',
@@ -85,7 +85,7 @@ const BEATS: Beat[] = [
             </>
         ),
         subtext: 'Reports without PRs are free.',
-        preview: <ReportPreview />,
+        Preview: ReportPreview,
     },
 ]
 
@@ -97,25 +97,30 @@ const BEATS: Beat[] = [
 function SelfDrivingCommand({
     size = 'md',
     surface,
+    containerRef,
 }: {
     size?: 'sm' | 'md'
     surface: InboxWelcomeCopySurface
+    // The example cards scroll to this ref and pulse it, so a click on an example has a visible answer.
+    containerRef?: React.RefObject<HTMLDivElement>
 }): JSX.Element {
     return (
-        <CommandBlock
-            command={SELF_DRIVING_WIZARD_COMMAND}
-            copyLabel="self-driving setup command"
-            ariaLabel="Copy self-driving setup command"
-            decoration="rainbow"
-            size={size}
-            // The takeover is the control arm of the welcome experiment; the banner shows one
-            // fixed layout regardless of arm, so its copies carry no variant.
-            onCopy={() =>
-                captureInboxWelcomeCommandCopied({ variant: surface === 'takeover' ? 'control' : null, surface })
-            }
-            // rounded-md sits one step inside the rounded-lg card/banner it nests in.
-            className="!m-0 rounded-md border border-primary bg-surface-secondary hover:border-accent"
-        />
+        <div ref={containerRef} className="rounded-md">
+            <CommandBlock
+                command={SELF_DRIVING_WIZARD_COMMAND}
+                copyLabel="self-driving setup command"
+                ariaLabel="Copy self-driving setup command"
+                decoration="rainbow"
+                size={size}
+                // The takeover is the control arm of the welcome experiment; the banner shows one
+                // fixed layout regardless of arm, so its copies carry no variant.
+                onCopy={() =>
+                    captureInboxWelcomeCommandCopied({ variant: surface === 'takeover' ? 'control' : null, surface })
+                }
+                // rounded-md sits one step inside the rounded-lg card/banner it nests in.
+                className="!m-0 rounded-md border border-primary bg-surface-secondary hover:border-accent"
+            />
+        </div>
     )
 }
 
@@ -137,7 +142,7 @@ function Hero(): JSX.Element {
     )
 }
 
-function CommandCard(): JSX.Element {
+function CommandCard({ commandRef }: { commandRef?: React.RefObject<HTMLDivElement> }): JSX.Element {
     return (
         <div className="flex flex-col gap-3 rounded-lg border border-primary bg-surface-primary p-5">
             <div>
@@ -146,7 +151,7 @@ function CommandCard(): JSX.Element {
                     Run it in your project's repo, or set it up yourself below.
                 </p>
             </div>
-            <SelfDrivingCommand size="md" surface="takeover" />
+            <SelfDrivingCommand size="md" surface="takeover" containerRef={commandRef} />
             <ul className="m-0 flex list-none flex-col gap-1.5 p-0">
                 {WIZARD_SETS_UP.map((item) => (
                     <li key={item.label} className="flex items-center gap-2.5 text-sm text-secondary">
@@ -162,7 +167,15 @@ function CommandCard(): JSX.Element {
     )
 }
 
-function BeatRow({ beat, index }: { beat: Beat; index: number }): JSX.Element {
+function BeatRow({
+    beat,
+    index,
+    onExampleClick,
+}: {
+    beat: Beat
+    index: number
+    onExampleClick: () => void
+}): JSX.Element {
     return (
         <div className="flex flex-col gap-2">
             <div className="flex items-baseline gap-3 mb-1">
@@ -174,7 +187,9 @@ function BeatRow({ beat, index }: { beat: Beat; index: number }): JSX.Element {
             </div>
             {/* Real inbox cards, marked as examples and kept inert by the preview wrapper.
                 Full-width on mobile; indented to align under the beat text from sm up. */}
-            <div className="select-none pl-0 sm:pl-8">{beat.preview}</div>
+            <div className="select-none pl-0 sm:pl-8">
+                <beat.Preview onExampleClick={onExampleClick} />
+            </div>
             {beat.subtext ? (
                 <span className="text-[13px] text-secondary leading-snug text-right">{beat.subtext}</span>
             ) : null}
@@ -189,17 +204,33 @@ function BeatRow({ beat, index }: { beat: Beat; index: number }): JSX.Element {
  * report list – a plain centered column (not itself a card) that eases in with a subtle scale + fade.
  */
 export function InboxOnboardingTakeover(): JSX.Element {
+    const commandRef = useRef<HTMLDivElement>(null)
+
     useEffect(() => {
         captureInboxWelcomeViewed({ variant: 'control' })
     }, [])
 
+    const highlightCommand = useCallback(() => {
+        const el = commandRef.current
+        if (!el) {
+            return
+        }
+        // Jump instead of animating the scroll when the user asked for reduced motion.
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        el.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'center' })
+        // Restart the pulse on repeat clicks: drop the class, force a reflow, then add it back.
+        el.classList.remove('InboxOnboarding__commandPulse')
+        void el.offsetWidth
+        el.classList.add('InboxOnboarding__commandPulse')
+    }, [])
+
     return (
         <div className="InboxOnboardingTakeover mx-auto flex w-full max-w-3xl flex-col gap-6 px-4 py-6 sm:px-6 sm:py-12">
             <Hero />
-            <CommandCard />
+            <CommandCard commandRef={commandRef} />
             <div className="flex flex-col gap-7">
                 {BEATS.map((beat, index) => (
-                    <BeatRow key={beat.label} beat={beat} index={index} />
+                    <BeatRow key={beat.label} beat={beat} index={index} onExampleClick={highlightCommand} />
                 ))}
             </div>
         </div>

products/signals/frontend/inbox/components/onboarding/InboxOnboardingPreviews.tsx

@@ -11,9 +11,9 @@ import { playMeep } from './meep'
  * requests / Reports tabs use), fed mock data – so they read as the genuine article rather than a
  * lookalike. Because they look real, they're marked plainly as examples: an "Example" tag sits on
  * each card, the card itself is made non-interactive (so its Review/Archive buttons don't offer
- * live hover states or misleading tooltips), and a single click surface explains that the real work
- * arrives once you run the setup command. The meep stays as flair, but it's no longer the only sign
- * a click did anything.
+ * live hover states or misleading tooltips), and a single click surface sits on top. A click on that
+ * surface scrolls to the setup command and pulses it, so the click has a visible answer. The meep
+ * stays as flair on top of that.
  *
  * The sample work is a wink at Silicon Valley (the show): Pied Piper's middle-out compression and
  * the ever-looming Hooli.
@@ -62,10 +62,19 @@ const REPORT_SAMPLE: Omit<SignalReport, 'created_at' | 'updated_at'> = {
  * Wraps a real `ReportCard` and makes it legibly a sample. The card is rendered non-interactive
  * (`pointer-events-none`, `aria-hidden`) so its Review/Archive buttons and links no longer offer
  * live hover states or misleading tooltips ("Archive this report") that invite dead clicks. An
- * "Example" tag labels it at a glance, and a single click surface on top plays the meep flair while
- * a tooltip explains that real work lands here once the setup command runs.
+ * "Example" tag labels it at a glance, and a single click surface on top scrolls to the setup
+ * command and pulses it (via `onExampleClick`), so a click gets a visible answer rather than only a
+ * sound.
  */
-function PreviewCard({ report, tabKey }: { report: SignalReport; tabKey: 'pulls' | 'reports' }): JSX.Element {
+function PreviewCard({
+    report,
+    tabKey,
+    onExampleClick,
+}: {
+    report: SignalReport
+    tabKey: 'pulls' | 'reports'
+    onExampleClick: () => void
+}): JSX.Element {
     return (
         // `@container` so ReportCard's `@lg:` row layout resolves against the preview width (it has no
         // inbox-list container here). `role="presentation"` – the whole thing is decorative.
@@ -83,26 +92,41 @@ function PreviewCard({ report, tabKey }: { report: SignalReport; tabKey: 'pulls'
                 Example
             </LemonTag>
 
-            {/* One interactive surface over the whole card: a click plays the meep flair, and the
-                tooltip is the real signal – it says this is a preview and how to get the real thing. */}
-            <Tooltip title="This is an example. Run the command above to get real ones in your inbox.">
+            {/* One interactive surface over the whole card. A click scrolls to the setup command and
+                pulses it, so the click has a visible answer, then plays the meep flair on top. */}
+            <Tooltip title="This is an example. Run the setup command to get real ones. Click to jump to it.">
                 <button
                     type="button"
-                    aria-label="Example card – run the setup command to get real ones in your inbox"
+                    aria-label="Jump to the setup command that brings real ones to your inbox"
                     className="absolute inset-0 z-10 h-full w-full cursor-pointer"
-                    onClick={() => playMeep()}
+                    onClick={() => {
+                        onExampleClick()
+                        playMeep()
+                    }}
                 />
             </Tooltip>
         </div>
     )
 }
 
-export function PullRequestPreview(): JSX.Element {
+export function PullRequestPreview({ onExampleClick }: { onExampleClick: () => void }): JSX.Element {
     const landed = landedHoursAgo(2)
-    return <PreviewCard report={{ ...PULL_REQUEST_SAMPLE, created_at: landed, updated_at: landed }} tabKey="pulls" />
+    return (
+        <PreviewCard
+            report={{ ...PULL_REQUEST_SAMPLE, created_at: landed, updated_at: landed }}
+            tabKey="pulls"
+            onExampleClick={onExampleClick}
+        />
+    )
 }
 
-export function ReportPreview(): JSX.Element {
+export function ReportPreview({ onExampleClick }: { onExampleClick: () => void }): JSX.Element {
     const landed = landedHoursAgo(4)
-    return <PreviewCard report={{ ...REPORT_SAMPLE, created_at: landed, updated_at: landed }} tabKey="reports" />
+    return (
+        <PreviewCard
+            report={{ ...REPORT_SAMPLE, created_at: landed, updated_at: landed }}
+            tabKey="reports"
+            onExampleClick={onExampleClick}
+        />
+    )
 }