feat(dashboards): add WidgetCard shell and dashboard widget UI glue (7/11)

[MattPua]

Problem

Dashboard widgets need shared frontend shell components before any concrete widget type lands. This PR adds the WidgetCard compound component, add-widget modal, catalog/registry scaffolding, and dashboard scene glue with an empty widget catalog.

This PR is 7/11 in the dashboard widgets Graphite stack.

Depends on: PR 6 (#60494 — widget registry and run_widgets API)

Changes

• WidgetCard compound components, DashboardWidgetItem, add-widget modal, widget type picker
• Empty DASHBOARD_WIDGET_CATALOG and DASHBOARD_WIDGET_REGISTRY (concrete types in follow-up PRs)
• Dashboard scene integration: dashboardLogic, DashboardItems, widgetFetchUtils, empty-dashboard UX
• Shared card chrome: CardTopHeadingRow, DashboardTileRefreshDataButton
• Widget availability guard and setup prompt infrastructure
• Jest tests for shell components and registry scaffolding

How did you test this code?

• Agent: ran Jest tests for WidgetCard, DashboardWidgetItem, registry scaffolding, and widget availability during development
• Feature remains behind dashboard widgets feature flag

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

Publish to changelog?

no — still feature flagged

Docs update

skip-inkeep-docs

🤖 Agent context

• Split from former PR CLOSED #60495 so shell UI can review independently of error tracking widget implementation
• Catalog and registry intentionally empty; error tracking registers in PR 8 (feat(dashboards): add error tracking dashboard widget (8/11) #60524)

[MattPua]

• feat(dashboards): add MCP tools for dashboard widgets (10/11) #60497 : 2 dependent PRs (#60514 , #60516 )
• feat(dashboards): add session replay dashboard widget (9/11) #60496
• feat(dashboards): add error tracking dashboard widget (8/11) #60524
• feat(dashboards): add WidgetCard shell and dashboard widget UI glue (7/11) #60523 👈 (View in Graphite)
• feat(dashboards): add widget registry, run_widgets, and dashboard widget API (6/11) #60494 : 1 other dependent PR (#60495 )
• feat(dashboards): add concurrent indexes for dashboard widget tiles (5/11) #60493
• feat(dashboards): validate dashboard tile widget constraints (4/11) #60492
• feat(dashboards): extend dashboard tile exclusivity check for widgets (3/11) #60491
• feat(dashboards): add dashboard tile widget_id column (2/11) #60490
• feat(dashboards): add DashboardWidget model and table migration (1/11) #60489
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Prompt To Fix All With AI

Fix the following 3 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 3
frontend/src/scenes/dashboard/dashboardLogic.tsx:1833-1837
**Public dashboard insights stop refreshing after this change**

Adding `DashboardPlacement.Public` to the exclusion in `handleDashboardLoadComplete` prevents `refreshDashboardItems` from ever being called on shared/public dashboards. `refreshDashboardItems` is the mechanism that fetches fresh data for stale insight tiles (it filters using `cache_target_age`). Skipping it entirely means insights on public dashboards will silently stall at whatever cached state they were in when the dashboard was loaded, even when their cache has expired.

The underlying motivation — avoiding `refreshDashboardWidgets` on public views — is already enforced: `refreshDashboardWidgets` returns early when `placement === DashboardPlacement.Public`. The `Public` guard here is redundant for widgets but harmful for insight tiles. Moving the `Public` exclusion to the widget-specific code block inside `refreshDashboardItems` (or simply removing it from `handleDashboardLoadComplete`) would preserve the original insight-refresh behaviour for public dashboards.

### Issue 2 of 3
products/dashboards/frontend/components/DashboardWidgetItem/DashboardWidgetItem.tsx:302-309
`userHasWidgetProductAccess` is missing an exhaustive `never` guard at the end of its switch, unlike the equivalent pattern used in `widgetAvailability.ts`. When `DashboardWidgetProductAccess` gains a new member (e.g. `'surveys'`), TypeScript will silently compile the function with an implicit `undefined` return instead of failing at compile time. Adding the guard aligns it with the existing safety pattern and catches omissions automatically.

```suggestion
    switch (productAccess) {
        // New gated widget types: add a case here — CONTRIBUTING.md
        case 'error_tracking':
            return userHasAccess(AccessControlResourceType.ErrorTracking, AccessControlLevel.Viewer)
        case 'session_recording':
            return userHasAccess(AccessControlResourceType.SessionRecording, AccessControlLevel.Viewer)
        default: {
            const _exhaustive: never = productAccess
            return _exhaustive
        }
    }
}
```

### Issue 3 of 3
products/dashboards/frontend/widget_types/widgetAvailability.test.ts:14-42
The `session_replay_enabled` requirement is declared alongside `exception_autocapture` but has no test coverage. A parameterised table would cover both requirements without repeating the setup, and would automatically catch any future addition to `WidgetAvailabilityRequirementId`.

```suggestion
    it.each([
        {
            requirement: 'exception_autocapture' as const,
            teamPropKey: 'autocapture_exceptions_opt_in' as const,
        },
        {
            requirement: 'session_replay_enabled' as const,
            teamPropKey: 'session_recording_opt_in' as const,
        },
    ])('evaluates $requirement requirement', ({ requirement, teamPropKey }) => {
        expect(
            isWidgetAvailabilityRequirementMet(requirement, {
                ...MOCK_DEFAULT_TEAM,
                [teamPropKey]: false,
            })
        ).toBe(false)

        expect(
            isWidgetAvailabilityRequirementMet(requirement, {
                ...MOCK_DEFAULT_TEAM,
                [teamPropKey]: true,
            })
        ).toBe(true)
    })
```

_{Reviews (1): Last reviewed commit: "feat(dashboards): add WidgetCard shell a..." | Re-trigger Greptile}

[MattPua]

Merge activity

• Jun 1, 10:51 PM UTC: @MattPua merged this pull request with Graphite.

[deployment-status-posthog]

Deploy status

Environment	Status	Deployed At	Workflow
dev	✅ Deployed	2026-06-01 23:14 UTC	Run
prod-us	✅ Deployed	2026-06-02 10:18 UTC	Run
prod-eu	✅ Deployed	2026-06-02 10:20 UTC	Run