Promote Agent Skills docs on the dashboard

[GregorShear]

Summary

• Adds an "Agent Skills" promotional header pill to the top navbar with a hover tooltip card
• Adds a dismissable bottom-right toast
• Toast dismiss state persists in localStorage so it stays hidden after the user closes it

[jshearer]

This is 85% claude-written, just edited by me, but I think the feedback makes sense:

Promotion intensity. The toast renders on every authenticated route, animates in 1s after each navigation that remounts the layout, and persists across sessions until the user clicks X. Combined with the always-visible HeaderPill, every user sees both promotions on every page load for as long as it takes them to find the X. Options:

• Show toast only on the dashboard/home route.
• Auto-dismiss after the first hover, click, or N views.
• Time-bound it (e.g., hide after Date.now() > <campaign-end>).
• Show toast OR pill, not both — the pill alone is plenty discoverable.

If "be loud about this for a few weeks" is the explicit goal, that's a reasonable answer, but make it deliberate rather than implicit.

A11y issue:
src/components/AgentSkills/Toast.tsx:49-76 — onClick={handleClick} + cursor: 'pointer' on a <Box> with no role="button", no tabIndex, no keyboard handler. Keyboard and screen-reader users can't trigger the outer area. Two ways out:

• Make the outer Box component="a" with href={AGENT_SKILLS_URL} (and drop the redundant inner <Link> CTA, or keep the inner Link and remove the outer click handler entirely).
• Wrap in ButtonBase (used elsewhere in the codebase).

The current state also has a redundant double click target (outer Box + inner Link both go to the same URL).

Hardcoded colors break dark mode. shared.ts exposes light/dark variants for GRADIENT, BG_GRADIENT, SECONDARY_TEXT_COLOR, GRADIENT_HORIZONTAL — but several colors elsewhere are mode-blind:

• LINK_COLOR = '#2e64eb' (Toast badge text, CTA link, HeaderPill border)
• Toast badge background #eaf0ff (light blue on dark paper in dark mode)
• Toast eyebrow text #64748b
• Toast IconButton color #94a3b8 / hover #475569
• HeaderPill border rgba(46,100,235,0.22) and hover styles
• TooltipContent border rgba(15,23,42,0.06) (effectively invisible in dark mode)

Either give these mode variants like the other constants, or use theme tokens (theme.palette.primary.main, text.secondary, divider, the alpha_* ramps). The codebase exposes sample_blue, sample_grey, and primary.alpha_08/12/26 for exactly this.

Codebase blue mismatch. The gradients use #2e64eb; the app's primary blue is sample_blue[600] = #3A56CA. The pill stands out as off-brand against the rest of the chrome. Worth aligning to sample_blue (and/or primary.main) unless the brand-new color is intentional.

Toast collides with the docs side panel. Toast is position: fixed; right: 24; bottom: 24 with zIndex: 1200. The docs side panel lives on the right edge of the viewport. When users open the docs panel, the toast sits on top of the panel's lower-right region. Either anchor relative to the left pane, hide the toast while the docs panel is open, or test that the overlap is acceptable.

localStorage key is forever-sticky. Once dismissed, the toast never returns. If you ever want to re-promote (v2 of skills, new content), you'll need to bump the key. Worth a TODO at the enum declaration, or include a version in the value (e.g., store the version dismissed, compare against current).

Toast width 380px on small viewports — minWidth: sm = 650 is enforced on the body, so this won't break layout, but it does cover a large chunk of a small browser window. Consider maxWidth: '90vw' or media-query sizing.

No analytics. If you care whether this works, instrument the click. There's no LogRocket event for "Agent Skills CTA clicked" or "Toast dismissed" — you'll have no signal on whether the placement worked.

[travjenkins]

We use Icon Noir for icons and they have added sparks in. We might want to use that one as they have a few variations.

[travjenkins]

This looks a bit weird to me when there is an update. I think it might look better if the pill is to the right

[travjenkins]

I would recommend using the pattern for persist that already exists

ui/src/stores/Tenant/shared.ts

[travjenkins]

This is a link and I don't think it needs a pointer setting

[travjenkins]

Seems like we can get 99% of the visuals with just transform 200ms ease

[travjenkins]

This seems to just be recreating a chip manually

[jshearer]

LGTM thanks!